O guia amigo do seu cérebro 


Use a Cabeça! 


(Head First) 


Aumente sua 
experiência como 
usuário com a 
interatividade das 
páginas da web 


Aprenda conceitos 

importantes do 
JavaScript para o 
seu cérebro 


Faça o código 


JavaScript : 
funcionar ee 
E pia Sp 

de olh: 
e DOM 


E 


Pare de ter medo 
de manipular eventos — 
não machuca nada 


Exercite sua , 

mente com dezenas 
de quebra-cabeças 

e exercícios 


O'REILLY i Michael Morrison 


1 Web interativa * 
l Como reagir ao mundo 
x virtual 


* 


Ai, meu Deus! Não percebi que a Web 
poderia ser tão “perceptiva”. Ela sabe 
o que estou pensando agora? 


Cansado de considerar a Web em termos de páginas passivas? 
Foi tempo, acabou. São chamadas de livros. E são boas pata ler, aprender...muitas coisas boas. Mas não são 
interativas. E nem a Web sem um pouco de ajuda do JavaScript. Certamente, você pode enviar um formulário e talvez 
fazer um truque aqui e acolá com algum código HTML e CSS esperto, mas estará realmente apenas representando 
o Weekend at Bernie's ao apoiar uma página Web sem vida. A interatividade real requer um pouco mais 
de inteligência e muito menos trabalho...mas tem uma compensação muito maior. 


usuários ne 


As pessoas (on-line) têm necessidades 


Tudo bem, sabemos que a Web é virtual, mas as pessoas na Web são reais, com 
necessidades reais. Necessidades como pesquisar uma receita arrasadora de pão 
de carne, fazer o download de sua canção favorita do Meatloaf ou algo ainda tão 
grande quanto comprar uma casa nova. Felizmente, a Web diferencia ao priorizar 
suas necessidades! 


O 


E House Finder 
Pronto para localizar uma casa? 


sos. 


— Entrada do 


7 
| Entre o número de quartos: J usuario 


Entre o CEP:|/95014 


Finalmente, um modo fácil de 
comprar uma casa on-line. Digito 
meu salário, o que estou procurando 
e o resto é automático. 
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web interativa 


Como falar com uma parede... nada acontece 


A Web nem sempre é tão responsiva quanto poderia ser. Na verdade, algumas 
vezes pode parecer totalmente fria e insensível, desinteressada do mundo externo 
e indiferente às necessidades de seus muitos usuários. Você poderia esperar que 
quando fornecesse dados assim iria gerar algum tipo de resposta...mas nada 
aconteceu. Não é pessoal; a Web estática não conhece nada melhor. 


/ 

À entrada do usvario... € ainda 
7 

nada esta acombecendo, 


= cs 
Y T 
[Sm T 
É do 
House Finder 


Pronto para localizar uma casa? 


a | Entre a renda anual: [80000 
| 
| 
| 


Entre o número de quartos: !3 


Entre o CEP:[95014 
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interatividade com o javascript 


Mas o JavaScript dá uma resposta 


O JavaScript move a chave que transforma uma página Web em à 
uma experiência interativa. Ele capacita coisas que podem ouvir as 

suas necessidades, processar sua entrada e atender aos seus desejos 

mais profundos. Tudo bem, talvez seja um esforço, mas o JavaScript 
pode transformar uma página Web em um aplicativo interativo, em 
oposição a uma página estática e sem vida, e isso é bom! 


4 
O usuario digita 

~ Z 
informações no formulario, 


eoe House Finder 
Pronto para localizar uma casa? 


| Entre a renda anual;|80000 

| Entre o número de quartos: 3 
| 

Entre o CEP:|95014 


" Calcula o Preço | Localizar Casas | 
A ciagu = 


4 as 
O usuario clica um botão e 


O VavaSeript começa a 
obtém os resultados, r x 


+rabalhar em resposta 
Nom 7 
as ações do vsvario, 


O JavaScript dá vida a uma página Web 
permitindo que responda à entrada do usuário. 
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web interativa 


Entre o número. 


aid 


À entrada do usuário é 
validada para a precisão, Entre o CEP no formulárioXXXXX 


—> 


Às informações em 
um adição são 900... House Finder - Matches. i — 
pesquisadas usando os 


parametros fornecidos 
pelo usuário, 110 Elm Street _ Ver 
cá 400 Maple Lane Ver | 
847 Main Street Ver 


As seguintes casas foram encontradas: 


Você pode comprar uma casa de até: R$320.000,00. 


Cora 


— 


Um cálculo é 
feito com base AI 
nas dados 

fornecidos pelo 

usuário, 
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HTML, CSS e JavaScript 
inter 
Luzes, câmera, “ação! 


O JavaScript coloca o HTML e o CSS como uma das três peças da construção da 
página Web moderna. O HTML fornece a estrutura, o CSS adiciona o estilo e o 
JavaScript inicia e faz as coisas acontecerem. Para encontrar o caminho para uma 
página Web interativa, você tem que seguir a trilha da estrutura (HTML) até o 


estilo (CSS) e então, a ação (JavaScript). Parecido com o CSS, o código JavaScript 
geralmente reside na página Web. 


ESTRUTURA 


<ineaa> 


cos 


<div Ldertramer> 


wader*>tronto para Localizar ima nova casa?</div> 


<style typestext/css> 
body í 
toseriaça rsat: 


pest-aliguccenter; 


escript type="text/javascript”> 


function validateNamber (value) | 


casy cranenrt 


J2 Valide a nomero 
brandas 1 


<input same] 


{1 it (isNusber (val 


fentritça arisi: 


ajere(Entro o nímero.”); 


<input tapes i 
<input eypemrl 


«tomo 


tunctien walidaraziPCode (value) ( 


«rato 
<ivoay> 


crat» 


4 Valado o coaigo postai 


|! 4€ (tsnzIPCoda (va luei! 


alerti*tntre o CEP no formulário XUKKN.”) 


EES ea 
pa = 4 
otirul 


fornece a 


estrutura, 


function findiouses (tom | 
var bedrocas = 
document .getzienenceyIdi"bedroons"} -values 
var zipcode = 


document getElonentayra ("zip") values 


O CSS adiciona 
o +ogue visual, 


HU sida uma Lista de casos colnsicantes a partir de servidor 


torm.sibmiti 1 


<iseript> 


º JavaScript ij injeta o Fogve Funcional, 


permitindo à a Me má Homar uma ação, 
Capítulo 1 


web interativa 


r As partes da página 
estão [A mas não estão 
formafedas e não tem 

| um interesse visual... 


soa House Finder o 
Pronto para localizar uma casa? 


4 

| A Pagina 

Entre a renda anual parece muito 

Entre a rent k 

Entre o número de quartos: ans Pn melka, 5 

Entre o cP SOA jiopse fin — s não fas 
Pronto para localizar uma casa? = 


r] Entre a renda anual:/80000 


Entre o número de quartos:|3 


Entre o cerjoso 14 


Agora, 

a pagina 

= aii 
fas alal 


) 


Você pode comprar uma casa de até: R$320.000,00. 


em 


Obrigado por ouvir, JavaScript! 
Estou a ponto de encontrar o 
apartamento de solteiro dos 
meus sonhos. 


y 
f 


O JavaScript entra em ação 
quando o usuário pede que a 
página execute uma tarefa. 
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por que adicionar o JavaScript? 


Não se pode fazer o mesmo 
com o HTML e o CSS? A 
Web era muito legal antes 
do JavaScript, você sabe. 


O HTML e o CSS não são realmente interativos 


O problema é que o HTML e o CSS não são realmente interativos. 
Certamente existem truques CSS que você pode usar para manipular 
os estilos em situações muito específicas como, por exemplo, colocar o 
mouse sobre os links, mas suas opções serão bem limitadas se estiver 
usando apenas o HTML e o CSS. 


O JavaScript permite detectar praticamente qualquer coisa que 

ocorre em uma página Web, como um usuário clicando botões, 
redimensionando a janela do navegador ou fornecendo dados em um 
campo de texto. E como o JavaScript é uma linguagem de programação 
do script, você pode aprender a escrever o código para responder a 
essas interações do usuário como, por exemplo, executar um cálculo, 
trocar dinamicamente as imagens na página ou até validar os dados. 


Relaxe Não se preocupe com os detalhes do 
JavaScript, pelo menos não ainda. 


Embora o JavaScript seja capaz de fazer todos os tipos de 
coisas, sabemos que você está no início de sua jornada. 
Fique certo de que os eventos. funções e muitas outras 
partes do quebra-cabeça JavaScript irão juntar-se com 
o tempo. Além disso, provavelmente você estará mais à 
frente no jogo do que pensa. 


HTML + CSS + JavaScript = Interatividade REAL 
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web interativa 


Você já sabe mais do que pensa. Veja o código para a 
página Web House Finder e escreva o que acha que cada 

parte circulada do código JavaScript está fazendo. Não tem 
problemas se adivinhar. 


ponte seu Lápis 


<html> 
<head> 
<tirle>House Finder</title> 
«<script type="text /javascript'> 
function validateNumber (value) i 
// Valide o número 
44 i£ (!isNumber (value) ) 
alert (“Entre o número. ”); 


function validateZIPCode (value) ( 
// Valide o código postal 
// if (!isZIPCode (value) ) 
alert (“Entre o CEP no formulário XXXXX.”); 


function calePricei) 4 
z maxPrice = document .getElementById (“income”) .value E» 
alertt"You can afford a house that costs up to $” + maxPrice + 


] 


function fi ndHouses (form) ( 
var bedrooms = document .getElementById (“bedrooms”) .valu 
var zipcode = document .getElementById (“zip”) value: 


/j Exiba a lista de casas coincidentes a partir do servidor 
form. submit ( 
} 
</script> 
</head> 


v frame”> 
id="header”>Ready to fi nd a 


(ea house?</div> 


<form name="orderform” act 
<div class="fi eld”>Entrg 
e pe="text” size="12" 


<input id="bedrooms” type: 
onblur="validateNumber (this value)" /></dj 


<input ii 
onblur="val idateZIPCode (his .value)Y / 
<input type="button” value=fCalcula o preço” 
onclick="calcPrice();" /> 
<input typ i 
</form> 
</div> 
</body> 
</html> 
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solução inteligente 


ponte seu Lápis 


Solu as Você já sabe mais do que pensa. Veja o código para a página Web 
ção House Finder e escreva o que acha que, cada parte circulada do 
código JavaScript está fazendo. Não tem problemas se adivinhar. 


<html> P Pede ao usuário que 
<nead> 
«<title>House Finder</title> 
«<script type="text /javascript”> 
function validateNumber (value) { 
// Valide o número 
ži if (!isNumber (value) ) 
alert (“Entre o número.”); 


farnega um codigo 


a! no formato com 


function validateZIPCode (value) ( 
4! Valide o código postal 
4) if (!isZIPCode (value) ) 


alert (“Entre o CEP no formulário XXXXX. 


Calevla o preço maximo da 


casa coma guetro vezes 


functi 4 
var maxPrice = document .getElementById (“income”) .value aD 
alert" Voce pode comprar uma casa até $” + maxPrice + “.”); 


} 


o salario do usuário. 


function fi ndHouses (form) ( 
var bedrooms = document .getElementById (“bedrooms”) .value; 
var zipCode = document .getElementById (“zip”) value; 


// Exiba a lista de casas coincidentes a partir do servidor 
£form.submit (); 
} 
</script> 
</head> 


Valida a campo income para 


assegurar que om número 
<body> 

<div id="frame”> 
<div id="header”>Pronto para lo: 
<div id="left”> 
<img src="house.png” alt="Hgúse” /> 


foi fornecido, 


izar uma nova casa?</div> 


«</div> 
<form name="orderform” actiôn="..” method="POST"> 
<div e da anual: 


O valor de campo de 


onblur="validateNumber (tl Ts.value)”/></div> 
<div class="fi eld”>Entre o número de quartos: 
<input id="bedrcoms” type="text” size="6" 
onblur="validateNumber (this .value)”/></div; 
<div class="fi eld”>Entre o CEP: 


<input id="zip” type="text” size="107 
onblur="val idateZIPCode(this .valus)?/></div> 
<input type="button” value=“Calcula o preço” 


onclick="calcPrice();” /> 
<input yI vei «d e="Localizar ca 
</form> 
</div> 
</body> 


embrada da codigo postal, 


Calevla o preço máximo da 


casa guando o usuário clica 


o botão Caleulate Price, 


web interativa 


Use a tag <script> para informar ao navegador 
que você está escrevendo JavaScript 


No momento, iremos colocar o JavaScript diretamente em uma página Web 
HTML, exatamente com vimos na última página. A primeira coisa que você tem 
que fazer é deixar que o navegador Web saiba que iremos fornecer-lhe o JavaScript, 
ao invés do HTML... e é onde a tag <script> entra. 


Você pode adicionar uma tag <script > em qualquer lugar em seu HTML, mas 
geralmente é melhor colocá-la na <head> de nossa página Web, assim: 


Esta tas do script informa 
ve guaiguer coisa depois dela 


<html> 
<head> 


<title>House Finder</title> € yma linguagem de script. 


aam 


Você pode colocar 
a tag do script 
em uma pagina 


„e neste caso, o Fipo 
de linguagem de seripre 
VavaSerip+. 


Todo entre as tags do script 
de abertura e de fechamento 
é JavaScript. o navegador 
sabe tratar isso como uma 
linguagem de seript, e não 
HTUL. 


A tag do script de fechamento informa ao navegador 
ve o HTML normal esti cortinvando agora, 


Hru normal, 
geralmente na 
seção head, 
Pa </head> 
<body> 
<!-- All the rest of your HTML --> 
</body> 
</html> gs 7” 
Não existem 
Perguntas idiotas 
P: Então qualquer coisa P: Então existem outras 
que eu coloco dentro da tag linguagens de script que 
<script> é JavaScript? posso usar? 
R: não necessariamente... RE absolutamente. A Microsoft tem 
atag <script> informa ao algumas variedades como VBScript 
navegador que uma linguagem de (uma versão de script do Visual 
script está chegando, mas não tem Basic) e seu tipo Ajax, chamado ASP. 
que ser JavaScript. A parte do tipo, NET AJAX. Falaremos mais sobre o 
type="text /javascript”, Ajax no Capitulo 12 também. E há 
é o que permite ao navegador saber várias outras linguagens de script que 
que você está para lhe fomecer o você pode usar. Mas para nossas 
JavaScript especificamente. finalidades, sempre usaremos text / 


javascript neste livro. 


P: Meus elementos <script> 
têm que estar na parte 
<head> de minha página, 
HTML? 


R: É uma boa pergunta. Você pode 
colocar os elementos <script> em 
qualquer lugar em sua página Web... 
mas é geralmente considerada uma 
prática ruim colocá-los em qualquer 
lugar, exceto em <head> de sua 
página Web. É como colocar o CSS no 
meio de uma página Web... geralmente 
é melhor separar o JavaScript, e a 
<head> de sua página é um lugar 
perfeito para fazer isso. 
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como informar ao navegador o que fazer 


Seu navegador Web pode lidar 
com o HTML, CSS E JavaScript ; 


Você já sabe que um navegador Web sabe como obter seu HTML e exibi-lo. E 
usou o CSS para informar ao navegador como mostrar as diferentes partes de 
seu HTML. Considere o JavaScript como apenas outro meio de se comunicar 
com o navegador... mas ao invés de dizer ao navegador como exibir algo (como 
no HTML ou no CSS), você dará ao navegador alguns comandos para seguir. 


[1] Você abre um 


eae Wes e O oO servidor Web 
a digita um VRL... descobre qual 
4 ornar 


i s psi 


para esse VRL. 


\ 


A 


É 
f 


EEB) 


[5] o servidor fornece 
“o sev navegador Web 
uma 6 cheia de 
tags TUL, regras 
CSS e VavaScript, A 


Servidor 


Web 
Oo navegador exibe o Hrul el 


usando as regras CS5, tudo 


3, 
a partir da página Wes... A 


ars 


o 


MOO ne Tre di Página Web 
Pronto para localizar uma casa? 
a DU o. 
j | Entre o número de quartos: E sabe coma Executar 
Entre o CEP: [05014 Bºalguer Vava Seript 
ĉi + 
= Saina Preço | Localizar Casas | omo denfra das tass 
Sserpt> pana s, $ 
s= Você pode comprar uma casa de até: R$320.000,00. orlen y Para fornecen 


Vilade à pásina Wes, 


—] 
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P: Como os navegadores 
Web executam o código 
JavaScript? 


R: Os navegadores Web têm 
uma parte especial do software 
dentro deles chamada interpretador 
JavaScript e seu serviço é executar 
o código JavaScript que aparece 
em uma página. É por isso que 
você pode ouvir o JavaScript sendo 
descrito como uma linguagem 
interpretada, em oposição a 

uma linguagem compilada. As 
linguagens compiladas como C++ 
ou CH, por exemplo, devem ser 
convertidas por uma ferramenta 
chamada compilador em um 
arquivo de programa executável. 
Não é necessário compilar os 
programas JavaScript porque o 
código JavaScript é interpretado 
diretamente pelo navegador. 


P: Como informo a uma 
página Web para começar 
a executar o código 
JavaScript? 


R: A maior parte do código 
JavaScript é executada quando 
algo ocorre na página como, por 
exemplo, a página sendo carregada 
ou o usuário clicando um botão. Um 
mecanismo JavaScript conhecido 
como “evento” permite a você 
inicializar uma parte do código 
JavaScript quando algo de interesse 
ocorre na página. 


Não existem 
Perguntas idiotas 


P: Considerando os 
problemas de segurança da 
Web, o JavaScript é seguro? 


R: Sim, na maior parte. O 
JavaScript é designado totalmente 
para impedir que o código malicioso 
cause problemas. Por exemplo, o 
JavaScript não permite a você ler ou 
escrever arquivos no disco rigido do 
usuário. Esta limitação acaba com 

o potencial de muitos virus e código 
malicioso parecido. Naturalmente, 
isso não significa que você não pode 
escrever um código JavaScript com 
erros que tome as páginas Web 
difíceis de usar. Significa apenas 
que é improvável que você coloque 
os usuários em sérios riscos com o 
JavaScript. E só para lembrar, os erros 
do navegador e hackers espertos 
descobriram modos de quebrar da 
segurança JavaScript no passado, e 
certamente ele não é imbatível. 


P: E a tag <script> no 
código House Finder... é 
HTML ou JavaScript? 


R: aprópratag <script> é 
HTML e sua finalidade é fornecer um 
meio de misturar o código do script 
com o código HTML. O código que 
aparece dentro da tag <script > 
é o código JavaScript. Como a tag 


web interativa 


<script> é para suportar 
diversas linguagens de script, você 
indica que o código é JavaScript 
usando seu atributo type. 


P: vi páginas Web que têm 
interatividade como, por 
exemplo, os formulários que 
verificam para assegurar 
que a data seja fornecida 
corretamente e parecem 
fazer isso sem o JavaScript. 
É possível? 


R: sim. É possível ter 
interatividade nas páginas Web 

sem o JavaScript, mas em muitos 
casos é ineficiente e desajeitado. 
Por exemplo, a validação dos dados 
nos formulários pode ser lidada no 
servidor Web quando você envia o 
formulário. Porém, isso significa que 
terá que enviar o formulário inteiro e, 
então, aguardar que o serviço faça 
a validação e retome os resultados 
como uma página nova. Você 

pode também validar o formulário 
com lápis e papel! A interatividade 
JavaScript ocorre inteiramente no 
navegador sem carregar uma nova 
página, eliminando a transmissão 
desnecessária de dados para um 
servidor. Não só isso, mas grande 
parte do que o JavaScript tem a 
oferecer em termos de interatividade 
não pode ser feita de nenhuma outra 
maneira sem complementos do 
navegador de terceiros. 


Identifique cada parte do código como sendo parte da linguagem JavaScript 
padrão ou uma parte personalizada do código criado por um programador 


Exercício para a página Web House Finder. 


alert JavaScript / Personalizado onblur JavaScript / Personalizado 


calcPrice JavaScript / Personalizado onclick JavaScript / Personalizado 


zipCode JavaScript / Personalizado findHouses JavaScript / Personalizado 


var value JavaScript / Personalizado 


JavaScript / Personalizado 
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solução do exercício 


Identifique cada parte do código como i 
ja sendo parte da linguagem JavaScript 
padrão ouma parte personalizada do código criado por um miga 
para a página Web House Finder. 
F A caixa pop-up gue indica 
Exercício um numero invalido. 
Resolvido Ps 


<head> 
<ritle>House Finder</títle> 
cscript types"text/javascript”> 
function validateNumber (value) ( 
4! Valide o número 
7) i£ (tisNumber (value) ) 
ajert (“Entre o número.”); 


alcPri: É 
function validatezifcode (value) 1 Fortes JavaScript / Esonatzado 


4/ Valide o código postal Sonara lacal de 


HH if (!isZIPCode {value} ) 
armazenamento para uma 


alert (“Entre o CEP no formulário XXX.) 5 


, 
parte dos dados. 
function calcPrice() 1 = 
ho aco = document :getElenentByIa (“income"W. z (JavaScript Personalizado 
value f 4; 7 
alert (“Você pode comprar uma casa até S” + O codigo personalizado 


maxPrice 
+ ATA 


, 


sue encontra as casas 


A coincidentes, 


dHouses JavaScript / somai) 


ipCode JavaScript 


Um local de armazenamento 
usado para manter o 
codigo postal fornecido 
pelo usuario, 


inblur (CraSpi) Personalizado 


E 4 
E Indica gue o usuario foi 


para o proximo campo de 
entrada, 


function findiouses (form) ( 
var bedrooms = document .getElementByTd (“bedrooms”) . 


value; 
var zipcode = document.getElementById("zip") -value; 


/4 exiba uma Ista de casas coincidentes a partir do 
servidor 
form.submit (); 
) 
</script> 
</head> 


<body> 
<div id=” frame” 
<div ide"header”>Pronto para localizar uma nova casa?</div> 
<div ide"left”> 
<img src="house.png” alt="House” /> 
</div> 
<form name="ord 


Fetion=”.." method=" POST"> 
eld”>Entre a renda anual: 

Š d=”income” type="text” aize="12" 
SnbluraryalidateNumber (this.value) ”/></div> 

<div class="fi eld">Entre o número de quartos: 
<input id="bedroons” type="text” sizes" 
nbiur="val idateNumber (this.value) ?/></div> 

<div class="fi eld">Entre o CEP: 
<input ide”zip” type="text” sizè 
Sablur="validateZIPCode (this.value) ”/></div> 

<input type="button” value="Calcula c preço” 
onclick=”calcPrice();” /> 

<input type="button” value="Localizar casas” 
enclick="fi ndHouses (this. form);” /> 


O valar atual da 
campo de entrada 
do codigo postal. 


</form> 
aa 
p aen Indica geo 
jhtm re 
botão Shop foi 
clicado, 
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web interativa 


O melhor amigo virtual do homem... precisa de SUA ajuda 


Acabando com a tarefa bem-sucedida de escrever páginas HTML e CSS, você foi 
chamado ao escritório de seu chefe para ver sua última invenção on-line: o iRock. é A 
O bichinho de estimação virtual está causando agitação em todas as conferências de is o Rack ate 
brinquedos, mas os usuários beta estão realmente infelizes com o bichinho on-line. ê SETE 
a er enas HT) 

Aparentemente, os usuários estão clicando na rocha e esperando que algo legal T ME 

5 É E e C55. É isso 
aconteça... mas seu chefe nunca pensou nisso. Agora, cabe a você tornar o iRock 


interativo e conseguir a glória... ou descer ao inferno com o iRock. Significa nenhuma 


interação com o 
7 


usvario, 


/ a 

Os usuarios estas clicando 
: 7 

em seu iRock e nada esta 


acontecendo. - 


y 
Usuarios 
seta irados 
congestionando 
as linhas 

de suporte 

+ 
Lrenico, 


Foi algo que eu disse? 


Apenas dê um sinal! 


Poder do 
cérebro 


Você acha que são os cliques 
do meu mouse? 


Que tipos de coisas você acha que o iRock 
deve ser capaz de fazer para interagir com 
seus usuários? 
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o plano para a interação 


Como tornar o iRock interativo 


Não só cabe a você tornar o iRock interativo, como também terá que aprender 


um pouco do JavaScript no percurso. Tudo bem, entretanto, terá sua rocha de 
estimação dizendo olá em pouco tempo. 


Eis o que fará no resto do capítulo: 


gt 
Vace ja sabe como 


Crie a página Web HTML iRock. <~ sazer isto, 


Um alerta é o modo 
do UkyaScripd exibir 
uma simples caixa de 
mensagem, 


Adicione um alerta JavaScript para <— 
fazer com que a rocha cumprimente 

os usuários quando a página Web 

iRock for carregada. 


Pa. 
Você esta conectando 


7 
Escreva o código JavaScript para aljo gue a usuaria faz, 
solicitar o nome do usuário, imprimir como clicar na rocha de 
um cumprimento personalizado e RN estimação virtual... 


fazer a rocha sorrir. 
e ~ uutom & 
Adicione uma sub-rotina de eventos atividade 


para quando os usuários clicarem na designada, 
rocha, o código escrito na etapa 3 
seja executado. 


Conquiste a admiração e a generosa 
gratidão de seu chefe. 
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Crie a página Web iRock 


Você não poderia encontrar uma página HTML mais simples do que o iRock. 
Continue e digite este HTML em seu editor favorito e grave-o como iRock.html. 
Você pode fazer download das imagens da rocha de estimação no site Web Head 


web interativa 


First Labs, em wwwaltabooks.com.br. A página HruLl da 


WC rocha de estimação 
é Fio chata quanto 
a propria rocha.. não 
é de se admirar que 
seu chefe precise de 
sua ajuda, 


<html> 
<head> 

<title>iRock - A rocha virtual de estimação </title> 
</head> 


<body> 
<div style="margin-top:100px; text-align:center”> 
<img id="rockImg” src="rock.png” alt="iRock” /> 
</div> 
</body> 
</html> 


Faça download do rockpng & 
partir dos exemplos on-line no 
site Web www altabooks.combr. dock iii 


‘Test drive” 


Antes de avançar mais, grave e teste sua página Web iRock em seu navegador 
Web. Certifique-se de que a sua esteja parecida com a nossa, pois você começará a 
adicionar alguma interatividade, no estilo JavaScript. 


Não existem 
Perguntas Ídiotas 


P: Esto css está na tag <div>? 


R: Certamente. Boa pergunta. 


HTML. O que acontece? 


7 , 

Ém poucas paginas, voce tera 

esta rocha chata sorrindo e 
4 


conversando com seus usuarios, seria muito legal! 


você está aqui» 


P: Pensei que fosse realmente uma má idéia 
colocar o CSS diretamente em uma página 


R: Você leu o Use a Cabeça HTML com CSS e XHML, 
não leu? Sim, você está certo. Geralmente é melhor colocar 
seu CSS em uma tag <style> na <head> de sua 
página ou em uma folha de estilo extema. Mas seu chefe 
não é codificador e, além disso, torna este primeiro exemplo 
muito mais simples. Mas se quiser prosseguir e escrever sua 
própria folha de estilo extema para o iRock, achamos que 
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como iniciar com os eventos 


Eventos JavaScript: como dar ao iRock uma voz 


Para usar o JavaScript para cumprimentar o usuário quando a página é carregada 
pela primeira vez, teremos que resolver dois problemas principais relacionados 
ao JavaScript: saber quando a página termina de carregar e saber como exibir um 
cumprimento para que o usuário possa vê-lo. 


O primeiro problema envolve responder a um evento (o evento de carregamento 

da página), ao passo que o segundo envolve usar um recurso JavaScript predefinido, 

a caixa de “alerta”. Os eventos são notificações JavaScript que permitem saber 

quando algo de interesse ocorreu como, por exemplo, um carregamento da página 

(onload) ou um botão sendo clicado (onclick). Você pode responder aos 

eventos com seu próprio código JavaScript personalizado. 

= O evento onload é inicializado 


oc ~ Tha Vis Pet ot 
quando a página Rock Fermina 


208. emacs 


de carregar no navegador. 


Os eventos são notificações 
que você pode responder 
com o código JavaScript. 


0 codigo para o evento onload 
é definido usando o atributo 
onload da tas <body> na pagina 
Wes Rock, 


Å Sunção alertC) informa ao 
navegador para exibir uma caixa de 
alerta se cumprimenta o usuário, 


18 Capítulo 1 


web interativa 


Como alertar o usuário com uma função 


Um alerta JavaScript é uma janela pop-up, ou caixa, que você pode usar para exibir 
informações para o usuário. Exibir uma caixa de alerta envolve escrever o código 
para chamar a função alert ( ) JavaScript e transmitir-lhe o texto que desejar 
exibir. As funções são partes reutilizáveis do código JavaScript que executam tarefas 
comuns, como por exemplo, exibir informações em uma janela pop-up. 


Quando você ve, parênteses imediatamente 
alert() < «o lado de um nome no codigo JavaScript, 


geralmente é uma função, 
E Um foco no alerta 
alert è o nome da função Esteé Sea aa 

o e g 


predefinida que exibe uma 
caixa de alerta, 


exibido na caixa de alerta 
— cologue-o emtre aspas, 


E EEE ES Ea 


Toda função VavaScript vsa parênteses 
para conter as informações sendo 

ER +ransmitidas para a função — neste 
casa, o texta a ser exibido. 


Um ponti e-virgula marca o final de uma 
4 

linha do código Uavaseript, um tipo de 

ponto no final de uma sembença. 


Quando você reúne tudo, obtém uma linha completa de código JavaScript que 
chama uma função para exibir o texto de cumprimento em uma caixa de alerta: 


alert ('Hello, eu sou a rocha de 


Não estresse os 
eventos. 


As funções são partes 
reutilizáveis do código Diet so SE 
que executam tarefas colocado entre 


apostrafos ou aspas. 


Se todo esse 
negóciodeeventos 
parecer uma tortura, não se 
preocupe porque os eventos 
continuarão a se desdobrar (e 
farão mais sentido) conforme 
avançar no livro. 


comuns. 
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como dizer olá com um evento 


Adicione o cumprimento iRock 


Portanto. para cumprimentar os usuários quando eles carregam as imagens Rock, 
você precisa adicionar uma sub-rotina de evento onload e um cumprimento 
usando a função alert ( ) do JavaScript. Adicione esta linha de JavaScript à sua 
página irock. html: 


<html> 
<head> . ù 
<title>iRock - A rocha virtual de estimação </title> 
</head> 


«body onload="alert (“Hello, eu sou a rocha de estimação.');"> 
<div style="margin-top:100px; text-align:center"> 
<img id="rockimg” src="rock.png” alt="iRock” /> 
</div> 
</body> 
</html> 


Mesma que o 
evemta onload, 
apligue-se à pagina 
4 
inteira, voce pade 
defini-lo como um 
atributo da tas 
< 
body> porgue o 
corpo de vma pagina 
4 
€ a parte visivel em 
um navegador, 


Lembre-se, sev UavaSeript var 
diretamente em sua pagina Web, O 
navegador Web sabe como lidar com 
o Uva Scriz +, exatamente como 
faz com o ITHAL e a CSS. 


Faça um ‘test drive” de sua rocha interativa 


A página iRock agora é um pouco mais interativa graças a uma caixa de 
alerta cumprimentando exibida em resposta ao evento onload. Carregue 


Assim que a pagina é 
q FT 
o irock.html em seu navegador Web e veja o que acontece: 


carregada, uma caixa 
+ 
de alerta devera 


aiii Diadan $- aparecer em sva Fela 


com um cumprimento, 


/ 


Hello, eu sou a rocha de estimação 


Não existem 


Perguntas idiotas 


E: De onde vêm os eventos? 


R: Embora os eventos sejam iniciados 
por um usuário, eles vêm basicamente 
do navegador. Por exemplo: uma “tecla 
pressionada” é um evento inicializado 
pelo usuário, mas o navegador deve 
integrar informações sobre o evento 
(tipo qual tecla foi pressionada) e, então, 
transmitilas para uma função que foi 
designada a responder ao evento. 


P: O que acontece com os 
eventos que não têm um código 
ligado a eles? 


R: Se uma árvore cai e não há 
ninguém por perto para ouvir, ela fez 
barulho? O mesmo ocorre com os 
eventos. Se você não responder a 
um evento, o navegador prosseguirá 
e ninguém ficará sabendo. Em outras 
palavras, responder ou não a onload 
não tem significado no carregamento 
real da página. 


P: você não disse que o código 
JavaScript pertencia às tags 
<script>? 


R: Geralmente, sim. Mas você também 
pode colocá-lo diretamente em uma 
sub-rotina de eventos, como fizemos 
como evento onload. E quando precisar 
executar apenas uma linha do JavaScript, 
como para o iRock, essa será geralmente 
uma abordagem mais simples. 


+ 


F: Existem outras funções 
predefinidas como a função 
alert( )? 


R: sim, muitas. alert) é apenas 
a ponta do iceberg quanto ao código 
JavaScript reutilizável e predefinido. 
Falaremos sobre as funções padrões 
quando virmos os recursos do 
JavaScript. No final do livro, você até 
estará criando suas próprias funções 
personalizadas. 


P: Por que o código oniad 
do iRock mistura aspas e 
apóstrofos? 


R: OHTMLeo JavaScript requerem 
que você feche uma sequência de texto 
antes de iniciar outra... a menos que 
use um delimitador diferente (aspa 
ou apóstrofo). Portanto, nos casos 
onde o código JavaScript aparece 
em um atributo HTML (texto dentro 
de texto), você tem que misturar as 
aspas e os apóstrofos para solucionar 
esse problema. Não importa quais 
você usa para o atributo ou para o 
texto JavaScript, mas seja qual for o 
escolhido — terá que ser consistente. 
Talvez um exemplo de aspas e 
apóstrofos na linguagem esclareça as 
coisas... segundo o iRock. “O usuário 
clicou e disse: “Olá, alguém aí”. 


+ 


QUEM F. 


Ligar cada parte do código JavaScript ao que ela faz. 


onload 


+ 
o QUÊ? 


web interativa 


Q Pontos de Bala 


= Os eventos são usados para 
responder aos acontecimentos 
da página Web com o código 
JavaScript. 


a O evento onload é 
inicializado quando uma 
página termina da carregar. 


= Você responde ao evento 
onload definindo o atributo 
onload da tag <body>. 


m As funções permitem 
colocar o código JavaScript em 
módulos reutilizáveis. 


= Algumas funções requerem 
que você transmita-lhes 
informações para completarem 
sua tarefa. 


a Afunçãoalert( ) 
é uma função JavaScript 
predefinida que exibe uma 


mensagem de texto em uma 


pequena janela pop-up. 


Exibe uma mensagem de texto em uma janela pop-up. 


Termina uma linha de código JavaScript. 


Indica que a página Web acabou de carregar. 


Coloca as informações transmitidas em uma função. 
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como dar um toque pessoal 


+ r 


+ 
QUEM FÁZ O QUÊ? 


Ligar cada parte do código JavaScript ao que ela faz. 


onload Exibe uma mensagem de texto em uma janela pop-up. 


Termina uma linha de código JavaScript. 


Indica que a página Web acabou de carregar. 


Coloca as informações transmitidas em uma função. 


Agora, tornemos o iRock realmente interativo 


Você está fazendo um certo progresso em direção a um iRock mais interativo, 
mas ainda há mais a fazer antes da rocha de estimação virtual conquistar qualquer 
cliente... lembra de nossa lista de verificação? 


O Crieapágina Web HTMLiRoek- <— Feite! 


fazer com que a rocha cumprimente <—— insém terminov 
-os usuários quando a página Wob- com este! 


(3) Escreva o código JavaScript para 
solicitar o nome do usuário, imprimir 
um cumprimento personalizado e 
fazer a rocha sorrir. 


© Adicione uma sub-rotina de eventos 
para quando os usuários clicarem na 
rocha, o código escrito na etapa 3 
seja executado. 


(5) Conquiste a admiração e a generosa 
gratidão de seu chefe. 
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web interativa 


À interação é uma comunicação de mão DUP 


Agora, nossa rocha diz oi, mas não deixa o usuário fazer muita coisa Com ela. 
Realmente desejamos que a rocha responda aos usuários. Com a ajuda de um 
pequeno JavaScript, entretanto, o iRock poderá ser transformado em um bichinho 
de estimação simpático surpreendentemente sociável e totalmente amistoso, 
mudando sua expressão facial e cumprimentado o dono pelo nome... 


Quando o usvária clicar na rocha, 
ela perguntara seu nome, Qualssiinome? 


Agora o Rock pode 
cumprimentar seu 
usuária pessoalmente. 


4 
O Rock também deve meigo iq seed im h 
mostrar emoção 

4 
Sorrindo para o usuario, 


Erto, a satisfação do 
usuário aumemta Chem, 
essa é a ideia), 


O JavaScript permite ao usuário interagir com o iRock, transformando as teclas | 
pressionadas e os cliques do mouse (mais eventos) em brincadeiras entre um 3 
bichinho de estimação e seu dono. Uma amizade acionada pelo JavaScript nasceu! | 


e seu Lápis 


Adivinhe escrevendo o nome do evento JavaScript usado para 
responder a um clique do mouse. 
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solução inteligente 


k N seu Lápis 
Solução 


Adivinhe escrevendo o nome do evento JavaScript usado para 
responder a um clique do mouse. + 


onclick 


o evento onclick é inicialigado sempre que o 
usuária clica o mouse em um elemento na página 
— cada elemento da pagina Web pode Fer seu 
proprio codigo de resposta onclick exclusivo. 


Adicione uma função para obter o nome do usuário 


Eis uma função JavaScript, assada e pronta para usar. Sempre que vir 
JavaScript Saindo do Forno, isso significa que se deve digitar o código, como 
está. Mas confie em nós, você aprenderá tudo sobre esse código em breve e 
escreverá suas próprias funções. 


Este código é para uma função personalizada chamada touchRock ( ), == 
que pede ao usuário que forneça seu nome e, então, exibe um cumprimento JavaScript 
personalizado em uma caixa de alerta. A função também muda a imagem da 

rocha para um iRock sorridente. É tudo o que você precisa para acrescentar saindo do forno 
personalização ao iRock. 


Asé 
prompt) e uma 
Exatamente como aler K >», Foda função para exibir 
função no VavaSeript z dem um nome, uma caixa e obter 
O nome desta função é LovchRock, um valor a partir 
do usuario, 
Assim sue 
function touchRock() i g 
var userName = prompt (“Qual o seu nome?”, “Enter your name here.”); vermos 
um nome, 
if (userName) { Faça 
alert (“Prazer em conhecer você, “ + userName + “.”); ia said 
document .getElementById (*rockImg”) src = “rock happy.png”; remos o usuario 
Ra pessoalmente, 


«-- € mudaremos à imagem da 
rocha para uma sorridente. 


Poder do 
cérebro 


Você pode descobrir onde esta função 


deve ficar em sua página irock.htmi? 
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Ímãs de geladeira JavaScript 


| | O código iRock amistoso não tem algumas partes principais do código. 
Você pode preencher as partes que faltam para compor a página? 


Sugestão; Não Hem certeza de suas 
respostas? Teste suas respostas 

7 
digtbando-as em sua pagina irock bbml, 


<html> 
<head> 
<title>iRock - A Rocha Virtual de Estimação </title> 


< .-. type-"text/j ript”> 


function touchRock() ( 
var userName = prompt (“Qual o seu nome?”, “Entre com seu nome aqui.”); 


if (userName) ( 
alert (“Prazer em conhecer você, “ + userName + “.”); 
document .getElementById (“rockImg”) .src = “rock happy.png”; 
} 
} 
</script> 
</head> 


<body <... < 
<div style 


</body> 
</html> 


Hello, Eu sou a Rocha de Estimação " 


você está aqui » 


solução dos ímãs JavaScript 


=| Solução dos Ímãs de geladeira JavaScript 
| O código iRock amistoso não tem algumas partes principais do código. 
Você pode preencher as partes que faltam para compor a página? 


As tunções JavaScript são O atributo type da Fag <seript> é 
colocadas em uma tag <seript> usado para identificar o Hipo da linguagem 
especial gue fica na <head> da página, de script, neste caso VavaSeript. 


<html> 
<head> 
<titletfRock - The Virtyál Fet Rock</title> 


fu ouchRock() ( 


var userName = prompt (“What is your name?”, “Enter your name here.”); 


if (userName) ( 
alert(“It is good to meet you, “ + userName + “.”); 
document . getElementById (“rockImg”).src = “rock happy.png”; 


, O atributo do evento onload da 


y 


Mude a imagem da 


PEEN tas <body> liga o cumprimento ; 
</head> da caixa de alerta à pagina, rocha para uma feliz, 


cuca « ET «e E ( [EeHE Ecos soca de mecimação ., 
<div sty PBin-top:100 PEx -a TON cento 


<img id="rockImg” src="rock.png” alt="iRock” style=”cursor:pointer” 


touchRock( ) > 
</div> 
</body> 
</html> 


O atributo do evento onclick 

da imagem da rocha faz com 
geen função Pouchlockt ) seja 
chamada guando a rocha € clicada, 


Mude o cursor do mouse para 
uma mão as passar sobre a rocha. 
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Reprodução instantânea: o que aconteceu? 


Um pouco do JavaScript iniciou muitas mudanças, o que resultou em uma versão 
mais amável do iRock. Vejamos uma reprodução instantânea de quais alterações 
foram feitas e como elas comprimem a página. 


sos Rock ~ The Virtual Pet Rock 


ficar na imagem 
g I iRock faz com gue 

ES nee 

função UavaScript 

personalizada, 


” src="rock.png” alt="iRock” 


=”. KI 
a o ER onclick="touchRock ();” 


style="cursor:pointer” 


o inicie uma 4> 


f 


function touchRock () { 
var userName = prompt (“Qual o seu nome?”, 
“Entre com seu nome aqui.”); 
if (userName) į 
alert (“Prazer em conhecer você, “ + userName + “.”); 
document .getElementById (“rockImg”).src = “rock happy.png”; 
} 


EY - 
A imagem di 
rocha muda 
para vm iRoc: 
sorridente, 


À função solicita do 

4 nu 
nome do usuario e então, 
cumprimenta -o pessoalmente, 


Qual o seu nome? 


PR sd 
Paul 


Comi) EEE 
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o iRock agita! 


“Test drive” do iRock 1.0 


Certifique-se de que tenha deixado sua versão do irock. html como a da página 
26 e que tenha feito o download de ambas as imagens de rocha em Head First Labs 
(wum:altabooks.com.br). Então, abra sua página Web e dê à rocha um giro: 


ena “Rock The Virtual Pet Rock o 


Prazer em conhecer você; Paul. OJ: avaSeript 
permite que 
as páginas 
Web FAÇAM 


3 não apenas 
representem e se 
O SricapáginaWebHTMLIROCk- < comuniguem. 
sm Feito! 


(2) -Adicione -um-alerta JavaScript para. 
fazer com que a rocha cumprimente S— qslm terminov com estel 
-os usuários quando a página Web- 
iRock for carregada. 


, 
(3) Escreva o código-JavaSoript para- a É agui que usamos a 


-solicitar o nome do usuário, imprimir função +ovchRackC), 
-um-cumprimento personalizado e- 
fazer a rocha sorrir. 

O Adicione uma sub-rotina de ovontos < sanss a sub-rotina de 


—para quando os usuários clicarem na 
-rocha; o código escrito na etapa 3 - 
-seja executado. — 


evento onclick para isto. 


O chefe esta feliz Um 


(5) Conquiste a admiração e a generosa <— aumento e um monitor 
gratidão de seu chefe. widescreen podem demorar 
muito? 
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Cruzadas do JavaScript 


Reserve algum tempo para descansar e dê ão lado direito do seu 
cérebro algo para fazer. É sua palavra cruzada padrão; todas as 
palavras da solução são deste capítulo. 


Horizontal 


2. O nome de uma parte do código que fornece 
ao iRock um cumprimento personalizado. 

4. Para responder a um clique do mouse, 
simplesmente defina algum código JavaScript 
para o atributo........... de um elemento HTML. 

7. Sem isto, você pode simplesmente ficar com o 
HTML e o CSS. 

8. Para exibir texto para o usuário, apenas chame 
a função 


Vertical 


1. Uma parte reutilizável do código JavaScript 
que executa uma tarefa comum. 

3. Algo acabou de acontecer e o navegador está 
tentando permitir que você saiba. i 

5. “O brinquedo on-line bom da temporada”, 
6. Permite que você saiba que uma página Web 
acabou de carregar. 
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solução da Cruzadas do JavaScript 


KRZ Solução da Cruzada do JavaScript 


e RE 
V 
E o 


opanEan 


30 Capitulo 1 


2 armazenando dados X 


Tudo tem seu lugar 


+ * 


Toda moça precisa ter um lugar 
especial para armazenar seus 
pertences valiosos... sem falar em um 
pouco de dinheiro e um passaporte 
falso para uma fuga rápida. 


No mundo real, as pessoas normalmente ignoram a importância 
de se ter um lugar para armazenar todas as coisas. No JavaScript nem 
tanto. Você simplesmente não pode se dar ao luxo de ter um grande closet e uma garagem 
para três carros. No JavaScript, tudo tem seu lugar, e é sua função certificar-se disso. A 
questão é dados — como representá-los, como armazená-los e como encontrá-los, uma 
vez que os tenha colocado em algum lugar. Como um especialista em armazenamento 
JavaScript, você será capaz de pegar um espaço desordenado de dados JavaScript e impor 
sua vontade em um turbilhão de rótulos virtuais e depósitos de armazenamento. 


scripts de armazenamento de dados 


Seus scripts podem armazenar dados 


Quase todo script precisa lidar com dados de uma forma ou de outra, e 
isso geralmente significa armazenar dados na memória. O interpretador 
de JavaScript que reside nos navegadores Web é o responsável por separar 
pequenas áreas de armazenamento para os dados JavaScript. No entanto, 
é sua função explicar claramente quais são os dados e como pretende 


As informações associadas a uma 
Pesquisa de casas devem estar 
fodas armazenadas dentro do 
script gue executa as cálculos, 


Os scripts usam dados armazenados para realizar cálculos e 
lembrar as informações sobre o usuário. Sem a capacidade de 
armazenar dados, você nunca encontraria aquela casa nova ou 
conheceria realmente o seu iRock. 


O nome da usvário digitado na ] 
página do Rack € armazenado 
em outro lugar, fagendo com pve 
o script possa exibi-lo em uma 
saudação personalizada. 


Poder do 
Cérebro 


Pense nos diferentes fragmentos de informações do mundo real com os 


quais você lida todos os dias. Como eles se parecem? Como organizaria 
esses diferentes fragmentos de dados? 
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Os scripts pensam nos tipos de dados 


Você organiza e agrupa dados do mundo real em tipos sem nem mesmo pensar nisso: 
nomes, números, sons, e assim por diante. O JavaScript também agrupa dados de script em 
tipos de dados. Os tipos de dados são a chave para mapear as informações do seu cérebro 
para o JavaScript. 


Cérebro humano JavaScript 


ED R$19,95 > número a 


Ligue a máquina de 
scr Á lavar pratos —S booleano — = 


Leve-me aojogode 5 -d 


— > beisebol 


O JavaScript usa três tipos básicos de dados: 
texto, número e booleano. 


Número 


Os números são usados para armazenar 
dados numéricos como pesos € 5 
quantidades de coisas. Os números em 
JavaScript também pode: s 
quilos) ou decimais (2,5 quilos). 


m ser inteiros (2 


Booleano 


Os dados booleanos estão sempre 
em um ou dois estados possíveis: 
verdadeiro ou falso (true ou 
false). Portanto, você pode usar 
um booleano para representar 
algo que possua duas definições 


Texto 


Os dados de texto são apenas uma 
seqüência de caracteres, como o 
nome de seu cereal favorito. Texto 
geralmente contém palavras ou 
Ss, mas não precisa ter. Também 
conhecido como strings, o texto em 
JavaScript também aparece dentro di 
aspas (“º” ou apóstrofo CE 3 


possíveis, como o botão ligar/ 
desligar de uma torradeira. Os 
booleanos aparecem a todo 
momento e você pode usá-los 
para ajudar na tomada de decisões. 
Falaremos mais sobre isso no 
Capítulo 4. 


Os tipos de dados afetam diretamente a forma como você trabalha com 
dados no código JavaScript. Por exemplo, as caixas de alerta exibem texto, 
não números. Então, os números são convertidos despercebidamente em 


texto antes de serem exibidos. 
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Aponte seu lápis 


ta. Aponte seu lápis 
“> Procure tudo que possa ser representado por um tipo 
F de dados JavaScript, e anote que tipo deveria ser. 
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HARRY'S 
BARBER SHOP 


DONT 


armazenando dados 


Aponte seu lápis 


Aponte seu lápis 


Solução Sua tarefa era procurar tudo o que o JavaScript pudesse 
representar e descobrir o tipo que ele usaria. 


Objeto (mais no 
capítulo 9) 


=) 


over 0000) 
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Texto 


} 


Número 
EEE 


T = 
45h aale xio JQuando númerosJofcaracteres) 
estão [misturados osIdadosisao SEMPRE 
onsiderados iai 


semelhança versus diferença 


Constantes permanecem IGUAIS, ` 


variáveis podem MUDAR Dados de variáveis 


Armazenar dados em JavaScript não significa apenas tipo, significa podem mudar - 
também finalidade. O que você deseja fazer com os dados? 

Ou mais especificamente, os dados se modificarão ao longo do dados de constantes 
processo do seu script? As respostas determinam se você codifica E 

os tipos de dados em JavaScript como uma variável ou uma constante. SÃO fixos. 

Uma variável se modifica ao longo do processo de um script, 

enquanto uma constante nunca muda seu valor. 


Constante Variável 
Terreno de 9 milhões 
de metros puadrados População de IOO 
- uma constante milhões de pessoas 
Ca menos que você - uma variavel Nú 
espere o tempo ve a população des 
suficiembe para ver ba ainda combinva 
o deslocamento das crescendo. 
placas +ectânicas da 
Terra), Š 
24 horas de um dia — 
uma constante, no ave Nascer do sol 
dis respeito aos seres as 6: Jh — uma 
humanos, embora a lua variavel, ja gue a 
esteja nos abandonando nascer do Sol muda 
lentamente. Hodos os dias. 
À URL de uma página 
da Web é www, d Total de 32 
duncansdanvts.com acessos â pagina = 
- uma constante, a uma varre! aji ge 
menos que os negocios os usuarios €. ci 
da famosa rosguinha constamemen i 
estejam enfrentando visitando a pagina € 
um periodo de retração alterando o cortador 
econômica, de acessos. 

Poder do 


Cérebro 
Que outros tipos de informação poderiam envolver tanto as variáveis 


como as constantes? 
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armazenando dados 


Faça um círculo em todas as informações do 
Duncan's Donuts e, em seguida, identifique cada 
item marcado com um círculo como sendo uma 
variável ou uma constante. 


a Aponte seu lápis 


OVER SERVED 
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solução inteligente 
Aponte seu lápis 


Solução Sua tarefa era encontrar todas as variáveis e 
constantes. 


Constante 


Variável 


Constante Variável 
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Conversa informal 


Quando o assunto é armazenar dados, ofereço 

o máximo em flexibilidade. Você pode mudar 
meu valor como quiser. Eu posso determinar um 
valor agora e um outro mais tarde — isso é o que 
eu chamo de liberdade. 


Com certeza, mas a sua resistência em mudar 
não funcionará em situações onde os dados 

têm que assumir valores diferentes ao longo do 
tempo. Por exemplo, a contagem regressiva do 
lançamento de um foguete tem que mudar no 
momento em que ele começa a contar de 10 a 1. 
Enfrente isso! 


Sim, claro, que seja. Como você qualifica 
variação como uma coisa ruim? Você não 
percebe que mudança pode ser uma coisa boa, 
especialmente quando é necessário armazenar 
as informações digitadas pelo usuário, realizar 
cálculos ou qualquer coisa do tipo? 


Acho que só precisamos concordar ou discordar. 


armazenando dados 


Conversa dessa noite: Variável e 
constante se enfrentam durante 
o armazenamento de dados. 


Constante 


E eu chamo isso de mudança de opinião! Digo: 
escolha um valor e se atenha a ele, É a minha 
persistência cruel que me torna tão valioso aos 
criadores de script... eles valorizam a capacidade 
de previsão dos dados que permanecem sempre 
no processo. 


Ah, então você pensa que é a única opção de 
armazenamento de dados para aplicativos de 
missão crítica, né? Errou! Como você acha 
que aquele foguete chegou à plataforma de 
lançamento? Porque alguém foi inteligente 

o bastante para fazer com que a data de 
lançamento fosse uma constante. Mostre-me 
um prazo final que seja uma variável e eu lhe 
mostrarei um projeto atrasado. 


Costumo dizer que quanto mais as coisas 
mudam, mais elas permanecem as mesmas. E 
realmente, por que mudar logo de cara? Fixe um 
bom valor no princípio e deixe-o em paz. Pense 
na satisfação de saber que um valor não poderá 
mudar nunca, acidentalmente ou não. 


Na verdade, eu discordei de você desde o início. 
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construindo uma variável 


As variáveis iniciam sem um valor 


Variável é um local de armazenamento na memória com um : 

nome específico, como uma etiqueta em uma caixa usada para 

armazenar coisas. Crie uma variável usando uma palavra-chave 

JavaScript específica chamada var e o nome da nova variável. Uma 

Palavra-chave é a palavra reservada em JavaScript para realizar 

uma determinada tarefa, como criar uma variável. x 

(a) pomo-e-virgula 
Fermina essa linha de 
codigo VavaSeript. 


End 
indica que você esta > 
criando uma nova variavel. 

q | on s 


Z 

O nome da variavel pode ser gualsver 
a A 

coisa gue Vacê gueira, comtambo gue 

Sa especifico derfra de seu script. 


A palavra-chave var 


Ao criar uma variável usando a palavra-chave var, essa variável se 
encontra inicialmente vazia... não possui nenhum valor. Tudo bem 
que uma variável inicie vazia, contanto que você não tente ler seu 
valor antes de atribuir a ela. Seria como tentar reproduzir uma 
música em seu tocador de MP3 antes de carregar as músicas para 
dentro dele. 


Jim, essa Cum 
variavel naya, O fim da linha. Vazia = pronta para 


E esse A armazenamento 
Da a 


variável é pagelhrtss, 


Uma variável recém-criada reservou um espaço de 
armazenamento separado e está pronta para armazenar dados, E 
a chave de acesso e a manipulação dos dados que ela armazena é 
o seu nome. É por isso que é tão importante que o nome de cada 
variável seja específico E significativo. Por exemplo, o nome 
pageHits oferece uma dica muito boa de qual tipo de dados essa 
variável armazena. Nomear a variável de acesso a páginas como x 
ou gerkin teria sido bem menos descritivo. 
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armazenando dados 


Inicialize uma variável com “ 


[Você não precisa criar variáveis sem um valor inicial. Na verdade, 


é sempre uma boa idéia dar um valor à variável assim que você 
cria. Isso se chama inicializar uma variável. É só uma questão 
le adicionar um pequeno fragmento de código extra à rotina de 
lcriação de uma variável normal: 


Termina à linhal 
de codigo, 


aan aa 


O sinal de igual, conecta 


o valor inicial é 
o nome da variavel ao seu 


armazenado na variavel, 
valer inicial, 


icializada está pronta para ser usada imediatamente... ela 
item sempre um valor armazenado nela. E como comprar Prtritua o valor 
tum tocador de MP3 pré-carregado — pronto para tocar. à variávek 


E contrário de sua contrapartida vazia, uma variável 


/ 4 
Igora a variavel contem 
1 
lados numéricos. 


Crie a variável, 


ea 
Especifigue sev valor. 
Nomeie, iá b 


Ainda se lembra dos tipos de dados? Uma outra coisa que esta linha de 
script faz é atribuir automaticamente o tipo de dados da variável. Neste 
caso, o JavaScript cria a variável de população como um número, porque 
você deu a ela um valor inicial numérico de 300. Se alguma vez a variável 
for atribuída a um outro tipo, então o tipo da variável muda para refletir 
os novos dados. Na maioria das vezes, o JavaScript trata isso de forma 
automática; há casos em que será necessário ser explícito e até converter 
em um tipo de dados diferente... mas chegaremos lá mais adiante. 
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constantes são teimosas 


As constantes são resistentes à mudança 


Inicializar uma variável tem a ver com definir seu primeiro 
valor — não há nada que impeça esse valor de ser mudado mais 
tarde. Para armazenar um fragmento de dados que não muda PRESTE ATENÇÃO! 
nunca, você precisa de uma constante. Constantes são criadas 
como variáveis inicializadas, mas use a palavra-chave const em vez 
de var, e o valor “inicial” se tornará um valor permanente... as 
constantes agem permanentemente! 


A palavra-chave const é 
razoavelmente nova para o 
JavaScript, e nem todos os 
navegadores a suportam. 
Verifique os navegadores 
que serão usados antes de 
liberar o código JavaScript 
que usará const. 


4 ante que 
Cria uma consta are g Atribui ym valar 
não pode 


y 


er mudada. 
7 à ei 


=: 5 == 
à O valor da constante 
nome e - esse valor não pode é do 
encerrado. 
constante. mudar nunca. e 


A maior diferença entre criar uma constante c uma variável é que você 
precisa usar a palavra-chave const em vez de var. À sintaxe é a mesma ao 
inicializar uma variável. Em muitos casos, as constantes são nomeadas 


com todas as letras maiúsculas para que se DESTAQUEM das variáveis 


em seu código. 
sses dados nunca, seno, 

unca mudam.. NUNCA: O valor gue a AN e 

À cod constante terá por EA los 
aa ' Foda a eternidade, To pedem 


[0] nome da ME com TODAS AS LETRAS 


MAZUSCUL AS q ajuda a Forna-la facilmente idertificave 
SE comparado a variáveis Ve usam lefradAss 4 
mp. BU vsam letradu: ta, 


Constantes são úteis para armazenar informações que você poderia 
codificar diretamente em um script, como “tax rate” (alíquota de 
imposto sobre vendas). Em vez de usar um número como 0,925, seu 
código ficaria muito mais fácil de entender se você usasse uma constante 
com um nome descritivo, como TAXRATE. E se alguma vez precisar 
mudar o valor da constante no script, faça a mudança em um único lugar 
— onde a constante é definida — em vez de tentar achá-la sempre que ela 
aparecer em seu script, o que poderia se tornar realmente complicado. 
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armazenando dados 


Espere aí! Eu pensei que 
Constantes não pudessem mudar. 


Constantes não podem mudar, pelo 
menos não sem um editor de texto. 


É verdade que constantes não podem mudar enquanto 
um script estiver sendo executado... mas não há nada que 
o impeça de mudar o valor de uma constante onde ela é 
criada originalmente. Assim, a partir da perspectiva de seu 
script, com certeza uma constante é fixa, mas a partir da 
sua perspectiva, ela pode ser mudada retornando ao ponto 
onde você a criou. Então, uma constante de alíquota de 
imposto não pode mudar enquanto o script estiver sendo 
executado, mas você pode mudar a alíquota em seu código 
de inicialização, e o novo valor da constante será refletido 
no script daquele ponto em diante. 


3 Determinar se cada uma das informações a seguir é uma variável ou uma 
Exerci cio constante e, em seguida, escrever o código para criar cada uma delas € 
inicialize-as (caso seja apropriado). 


A temperatura atual, que inicialmente é desconhecida 


A unidade de conversão de idade de seres humanos em idade de cães (1 ano 
humano = 7 anos caninos) 


A contagem regressiva de lançamento de um foguete (de 10 a 0) 


O preço de um delicioso donut (50 centavos) 
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solução do exercicio 


Sua tarefa era determinar se cada uma das informações a seguir é uma 
N variável ou uma constante e, em seguida, escrever o código para criar cada 
s oluç. ão do uma delas e inicializá-las quando fosse apropriado. S 
Exercicio 


A temperatura atual, que inicialmente é desconhecida 


A unidade de conversão de idade de seres humanos em 
idade de cães (1 ano humano = 7 anos caninos) 


A contagem regressiva de lançamento de um foguete (de 
10a0) 


O preço de um delicioso donut (50 centavos) 


var Hemp; 
hora €o 

temperatura muda Foda 
Ro Ak ecido, portanto uma 


valor € desconh à 
variavel vagja €o mais indicado. 


const Hu ANTODOE 


sê Essa Faxa de conversão não muda 
y 


portanto faz bastante sentido 
coma vma constante, 


var covnmtdo 


A contagem regressiva +em que ser cortada de 
/Oal, portante ela é uma variavel € precisa ser 
a miar (03 


inicializada para começar aco 


var donutPrice = O,S O; ou const DONT PRICE = OS O; 


Se o preço do donut mudar, w 
7 


sertido como uma variavel gree 
inicializada ao preço atual. mU +alves, a preço do donv 
seja fixo, € neste caso uma 
constante atribuida ao 

preço Funcionara melhor, 
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P: se eu não especificar o tipo de 
dados, como o JavaScript saberá 
qual é o tipo? 


R: ho contrário de algumas linguagens 
de programação, o JavaScript não 
permite definir explicitamente o tipo 

de uma constante ou variável. Em vez 
disso, o tipo fica implícito quando você 
define o valor dos dados. Isso permite 
bastante flexibilidade às variáveis do 
JavaScript, já que seus tipos de dados 
podem mudar quando valores diferentes 
forem atribuídos a eles. Por exemplo, se 
você atribuir o número 17 a uma variável 
chamada x, a variável será um número. 
Mas se, ao contrário, atribuir o texto 
“dezessete” a x, o tipo de variável muda 
para string. 


E Se os tipos de dados dos dados 
JavaScript estiverem cuidando 
disso automaticamente, por que eu 
deveria me preocupar com os tipos 
de dados? 


R: Porque existe um monte de 
situações onde você não pode contar 
somente com o tratamento automático 
dos tipos de dados do JavaScript. Por 
exemplo, talvez você tenha um nůmero 
armazenado como texto que queira 
usar em um cálculo. Você precisa 
converter o tipo de texto em um tipo de 
número para realizar qualquer cálculo 
matemático com o número. O inverso é 
verdadeiro quando um número é exibido 
em uma caixa de alerta — ele precisa 


Geralmente, dados de script podem ser 
representados por um dos três tipos básicos 
de dados: texto, número ou booleano. 


Nào existem 
perguntas idiotas 


ser convertido primeiro em texto. O 
JavaScript realizará automaticamente 
a conversão do número em texto, mas 
é provável que ele não o converta 
exatamente como deseja. 


P: Há algum problema em deixar 
uma variável não-inicializada, se eu 
não sei qual o valor de início? 


R: com certeza. Aidéia por 

detrás da inicialização é tentar evitar 
problemas onde você acessa uma 
variável quando não houver um valor. 
Porém, também há vezes em que não 
existe nenhuma forma de saber o valor 
de uma variável ao criá-la pela primeira 
vez. Se isso acontecer, certifique-se 

de que a variável foi definida antes de 
tentar usá-la. E lembre-se de que você 
pode inicializar sempre uma variável 
para “nenhum” valor, assim como *” 
para texto, O para números ou false 
para booleanos. Isto ajuda a eliminar o 
risco de se acessar acidentalmente os 
dados não-inicializados. 


Existe algum truque para se 
saber quando usar uma variável e 
quando usar uma constante? 


R: Embora seja fácil dizer que 
constantes não podem mudar e 
variáveis podem, há algo mais do que 
isso. Em muitos casos, você começará 
usando variáveis para tudo, e só 
perceberá que existem oportunidades 
de transformar algumas dessas 


armazenando dados 


váriáveis em constantes mais adiante. 
Mesmo assim, é raro poder transformar 
uma variável em uma constante. Muito 
provavelmente, você terá um fragmento 
fixo do texto ou do número usado em 
vários lugares, como uma saudação 
repetitiva ou uma taxa de conversão. 
Em vez de duplicar o texto ou o número 
várias vezes, crie uma constante para 
ele e use-a. Então, se você precisar 
ajustar ou mudar o valor, poderá fazê-lo 
em apenas um lugar em seu código. 


P: O que acontece com os dados 
do script quando uma página da 
Web é recarregada? 

R: Os dados do script retomam aos 
seus valores iniciais, como se o script 
nunca tivesse sido executado antes. 
Em outras palavras, atualizar uma 
página da Web causa o mesmo efeito 


sobre o script, como se ele estivesse 
sendo executado pela primeita vez. 


Tipos de dados 
são estabelecidos 
quando os valores 
das variáveis e 


das constantes são 
definidos. 


A palavra-chave var é usada para criar 
variáveis, enquanto const é usada para 
criar constantes. 


Uma variável é um fragmento de dados 
que pode mudar durante o processo de um 
script. 


Uma constante é um fragmento de 
informação que não pode ser mudado. 


O tipo de dados de um fragmento de dados 
JavaScript é estabelecido quando você 
atribui dados a um certo valor, e o tipo das 
variáveis pode mudar. 
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O que contém um nome? 


Variáveis, constantes e outros construtores de sintaxe do JavaScript são identificados 
nos scripts pelo uso de nomes conhecidos como identificadores. Os identificadores 
JavaScript são como nomes de pessoas no mundo real, exceto se eles não forem 
flexíveis (as pessoas podem ter o mesmo nome, mas as variáveis JavaScript não). Além 
de serem específicos dentro de um script, os identificadores devem obedecer a algumas 
leis de nomenclatura formuladas pelo JavaScript: 


Não vou tolerar 
transgressores da lei, 
quando o assunto for 
identificadores. 


Ao criar um identificador JavaScript para uma variável ou uma 
constante, você está nomeando um fragmento de informações 
que normalmente possui significado dentro de um script. Por 
isso, não basta apenas obedecer às leis de nomenclatura dos 
identificadores. Você deve adicionar contexto aos nomes de 
seus ntos de dados, para que eles sejam imediatamente 
identificáveis. 

Obviamente, existem momentos em que um simples x cumpre 
a tarefa — nem todo fragmento de dados em um script tem seu 
propósito facilmente descrito. 


Xerife J.S. Uustiça, 
um policial dedicado. 
Identificadores devem ser 
descritivos, fazendo com que 
os dados sejam facilmente 
identificáveis, além de legais... 
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Variáveis legais e ilegais e nomes de constantes 


firstName 
Não legal; não pode top100 
começar com um número, 


Legal: todas as letras, 
então esta tudo bem, 


Legal: os números 
mea aparecem na 
inicio, então estão 
ka chow em perfeitas 


VE condições. 


Legal: letras e 


sublinhados são 


excelentes. 
topSecret 
Não legal: não pode 
z começar com um 
Legal: não ha nenhum problema em caractere especial 
começar com sublinhado = algumas diferente de ou É. 


pessoas até usam essa técnica 
para nomear variáveis se possuem 


um Significado especial. a 


f 


Legal: embora pareça um pouco 
estranho, st NÉ com um 
cifrão é pertertamembe legal. 


Os magos da massa de donut do Duncan estão tentando decidir sobre o 

y design de um boné promocional. Infelizmente, eles não perceberam que 
Exercício alguns dos designs transgridem as regras do JavaScript na nomeação 
de identificadores. Marque um X sobre os nomes nos bonés que não se 
adaptarão ao JavaScript. 
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solução do exercício 


Sua tarefa era marcar um X sobre os bonés que possuem nomes de variáveis 
que não se adaptarão ao JavaScript. 


Solução do 
Exercício 


7 7 
Pontas de exclamação não Desculpe, espaços +ambém O simbolo da libra só 


a 7 
são permitidos em gualguer nio são permitidos. vai invocar a fúria do 
Xerife Uustiça. 


lugar de um identificador, 


Os nomes das variáveis usam letras 


maiúsculas e minúsculas (CamelCase) 


Embora não exista nenhuma lei em JavaScript que regule uma forma 

de intitular os nomes de identificadores, a comunidade JavaScript 

pa alguns padtões não oficiais. Um desses padrões é usar letras 
úsculas e minúsculas alternadas, como uma corcunda de 

pie oa (CamelCase), que significa misturar tipos de letra dentro de 

identificadores que consistem em mais de uma palavra (lembre-se 

de que não pode haver espaços em um nome de variável). Variáveis 

normalmente usam letras minúsculas (camelCase), onde a primeira 

palavra é toda composta de letras minúsculas, mas as palavras 

adicionais possuem letras maiúsculas e minúsculas misturadas. 


cake donuts À primeira letra ds 
nua Ed de cada palavra Apr rir E 
7 estaemmaiúscula de pa is 
s ñ PD Ri E exceto a pri 
eparar diversas ncia sDENTES PA em maisai, 


palavras com ym 
sublinhado em um 
idemtiticadon de 


7 
varável É é ilegal, coma letras maivsculas e minúsculas ao SS 
(CamelCase), mas ainda não é o akeDonuts 


mas existe uma forma jumC: 
totalmente ps: para variaveis. 2 
melhor, 


par 
1 etas minúsculas (camelCase) Au, aresta - letras minúsculas 
são usadas para nomear variáveis Feperfcitas para nomear 

à variaveis com diversas palavras, 
com diversasPalavras. 
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Melhor. esse estilo € conhecido 
7 


armazenando dados 


AN Imãs de geladeira JavaScript 


Os imãs identificadores foram separados das variáveis e constantes 
identificadas nos donuts do Duncan. Correlacione o imã correto a 
cada variável/constante, e certifique-se de evitar os imãs com nomes 
ilegais. Pontos de bonificação: identificar cada tipo de dados. 


o numero de , 
xicaras de cafe 


z O montante de 
vendidas hoje T farinha ge entra 
nome da em uma unica 
funcionaria do mês porção de donvts 


——me 


z 
— O ameno do 
ni Fa Sobre 
O status do atividades E 
z lEcordista dos sistema de alarme Empresariais usado 
biscoitinh, as mais para ajusta A 
comidos em uma imposto Sobre 
leunio Vendas 


employee*of*the*Month cups-o-coffee 


você está aqui» 53 


solução dos imãs JavaScript 


EA Solução dos Imãs de geladeira Javascript 


Os imãs identificadores foram separados das variáveis e constantes 
identificadas nos donuts do Duncan. Correlacione o imã correto a 
cada variável/constante, e certifique-se de evitar os imãs com nomes 
ilegais. Pontos de bonificação: identificar cada tipo de dados. 


[2] número de, 

xicaras de cafe D montante de 
vendidas hoje farinha que entra 
em uma Unica 


y [reeni DO porção de doneto 
Número 


a 
Se 0 nim E 
= eor sobre Número 
0 status do “Tividades 
O recordista das sistema de alarme 
biscorfinhos mais 


o nome da 


Empresariais Usada 


Para ajustar o 
comidos em nas imposta Sobre 
As 
PCunias 


Vendas 


eclairRecord 


Booleano 
Texto 


Employee of e Month 
eclairREÇORDHOLDE forene? 


Taxt 


Tados 05 nomes 
restantes i 
são ilegais em 


Javascript. 


flour quantity orcs À 
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O próximo passo importante (em donuts) 


Você deve conhecer os donuts do Duncan, mas você não 
conheceu o Duncan ou ouviu falar de seu grande plano para 
agitar o mercado de donuts. Duncan quer levar o segmento das 
“Donuts Quentes” ao próximo nível... ele quer colocá-los on- 
line! A idéia é: donuts com hora marcada, onde você faz um 
pedido on-line digitando um horário específico para pegá-las, e 
terá um pedido quente de donuts esperando por você no tempo 
determinado. Sua função é verificar se o usuário digita os 
dados exigidos, bem como calcular o imposto e o total do 


pedido. 


GOO Dmanshn:Tme Dst o 
Duncan's Just-In-Time Donuts 
A dono 80 cents oach, cake or ret 
none Par 
[ notes dont 
4 Do Tae 
fe A 
- amaro OO VavaSeript captura 
Tax p035 
e “5 informações do 
Usuario e calcula o 
imposto e o total. 


de pedidos on-line para fabricar 
donuts quentes vai BOMBAR! 


mg 


Aro, 7 S 
corre | 
Quente e 
“réis conurs 
cora a DOnUTE 


na horal 
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Formulários JavaScript de donuts 


Projete uma página da Web para o Duncan's Donuts 


Processar um pedido de donuts com hora marcada envolve a verificação” nn 
(ou validação) dos dados exigidos no formulário de pedido e o cálculo do 
total do pedido baseado nesses dados. O subtotal € o total são calculados 
dinamicamente enquanto os dados são digitados, fazendo com que 

o usuário obtenha a resposta imediata sobre o preço total, O botão 
Place Order (Faça seu pedido) serve para enviar o pedido final, o que 
realmente não é um problema do JavaScript... não estamos preocupados s€^ validadas pelo 
com isso aqui. VavaSeript. 


Éssas informações 

$ 4 
São necessarias para 
o pedido, e devem 


-Time Donuts 


e Donuts 
glazed! 


Duncan's Just=In 


soe 


Duncan's Just-In-Tim 
All donuts 50 cents each, cake or 


Éssas informações são 
calculadas dinamicamente 
com o vso do Uava Script. 


a: s / 

O Vaya Script não € necessario 
4 

para o envio do formulario final 

ao servidor Web, 
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- Calcula-se o subtotal multiplicando-se o número total de dois pelo preço 
- de cada um: 


(SOON SOS + NOF TORTANTOKG) x es 


e ce Calcula-se o imposto multiplicando-se o subtotal pela alíquota do imposto: 


Calcula-se o total do pedido adicionando-se o subtotal e o imposto: 


— d 


Parece que o Duncan possui uma quantidade considerável de dados em seu - 
formulário para verificação. Ele precisa manter não só os vários fragmentos de 

informações digitadas pelo usuário, como também existem vários fragmentos de 

dados que são calculados no código JavaScript. 


Com uma pequena ajuda do 
JavaScript cada pedido é 
concluído na hora certa... gênio! 


Poder do 
Cérebro 


De que variáveis e constantes você 
precisará para realizar esses cálculos? 
Quais você nomearia? 


sem levar em conta 


Uma primeira olhada nos cálculos dos donuts 


Duncan tentou escrever JavaScript para os cálculos, mas se defrontou com 
problemas. Tão logo o usuário digita uma quantidade de donuts, os cálculos 
dinâmicos perdem imediatamente o controle. Eles sugerem valores de $NaN que 
não fazem muito sentido. E o pior, os pedidos não são realizados e os clientes não 
estão exatamente vibrando com os “avanços” tecnológicos de Duncan. 


eos Duncan's Just-ln-Time Donuts 
a Duncan's Just-In-Time Donuts 
Ali donuts 50 cents each, cake or glazed! 


ANN é um codigo para 
algo +errivelmente 


Name: Paul ruim? 


asap e SS 
rma — — 
AE o 


Subtotal: |SNaN 
tee OOOO Isso não 
cone OO É bom 


<=: 


É hora de analisar o código de script do donut e ver exatamente o que está 

acontecendo. Examine a próxima página (ou os exemplos de código que você 
pode baixar em h4p:/ / wwm.headfirstlabs.com books/ hfis/), e veja se descobre o que 
aconteceu. 


oor” 


Sem donuts = um grande problema 
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ésse codigo é 
chamado para 
atualizar o 

pedido, calculando 
dinamicamente 


<html> 
<head> 

Stitle>Duncan's Just-In-Time Donuts</title> 

<link rel="stylesheet” type="text/css” href="donuts.css* /> 

<script type="text/javascript”> 

function updateOrder() ( 


deles const TAXRATE; 
o subto const DONUTPRICE; 
total, var nunCakeDonuts = document .getElementById (“cakedonuts”) .value; 


numGlazedDonuts = document .getElementById ("glazeddonuts”) .value; 
subTotal = (numCakeDonuts + numGlazedDonuts) + DONUTPRICE; 
tax = subTotal * TAXRATE; 
var total = subTotal + tax; 
document .getElementById (“subtotal”) .value = "$ + subrotal. 
toFixed(2); 
document .getElementById (“tax”) value = “$” + tax.toFixed(2); 
document .getElementById (“total”) .value = “$” 4 total .toFixed(2); 
) 
function placeOrder () ( 
4! Submit order to server... 


uk gee os dados 
digitados pelo 
Usuario parecem 
estar centos, 
deve haver algo 
errado com as 


constantes, form.submit (); 
, 
TA 7 </script> 
Esse codigo envia) onead 
lö pará <body> 
eper a é <div id="trame”> 
o servido 


<form name="orderform” actio 


confirma-o com à i="donuts.php” method="PosT"> 
1 


usvario, 


OE cake donuts: <ihput type="text” id="cakedonuta” 


4 akedonuts” 
O pedido e value="" onchange="updateOrder ();” /> 
ieado </div> 
atualiza da <div class="field”> 
quando muda # of glazed donuts: <input type="text” id="glazeddonuts” 
o numero de name="glazeddonuts” valua="" onchange="updateOrder ();” /> 
pesa </div> 


<input type="button" value="place Order” 


4 
O pedido é onclick="placeGrder (this. form) ;” /> 
enviado suando </div> 

</form> 


o bolão Place 
Order Faça - 
seu pedido) e 
clicado. 


“Aponte seu lápis 


</div> 


Escreva o que você acha que aconteceu de errado 
com o código de script do Duncan's Donut com 
hora marcada. 
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solução inteligente 


Aponte seu lápis 
Escreva o que você acha que aconteceu de errado 
com o código de script do Duncan's Donut com 


`~ à Solução 
hora marcada. 


+ tes, TAXRAT Donur PRICE 


4 E 7 
fica que os calculos gue dependem delas nao puderam ser concluidos, 


udo bem, entendo que uma constante 
possui sempre o mesmo valor, mas se 
é esse o caso, então como ela pode ser 
inicializada? 


Você não deve jamais deixar de inicializar uma constante. 

Você pode deixar de inicializar uma constante sem nunca dar 

um valor a ela, mas não é uma idéia muito boa. Quando você ~ 
não inicializa uma constante ao criá-la, essa constante acaba na 

terra de ninguém — não possui nenhum valor e, pior, nenhum 
valor pode ser dado a ela. Uma constante não inicializada é 
essencialmente um erro de codificação, embora os navegadores 
geralmente não o informe. 


Inicialize sempre as 
constantes ao criá-las. 
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Inicialize seus dados... ou senão 


Quando você não inicializa um fragmento de dados, ele é considerado indefinido 
(undefined), o que é uma forma elegante de dizer que ele não possui valor. Isso 
não significa que ele não vale nada, apenas significa que ele não contém nenhuma 
informação... ainda. O problema aparece quando você tenta usar variáveis ou 
constantes que não tenham sido inicializadas. 


Em Javascript, voce 
multiplica os Ea 
usando * em vez de x 


Mia Picializadta 


const DONUTPRICE; Loicializada 


0 o 


var numCakeDonuts = 0; 


var numGlazedDonuts = 12; P 


var subTotal = (numca: o + ne * ponjenters 
subtotal = (0 + 12) KO) pi 


: 
Isso evm 
grande problema, 


A constante DONUTPRICE não é inicializada, o que significa que não possui 
valor. Na verdade, o JavaScript possui um valor especial só para este estado de “não- 
valor”: undefined. É mais ou menos como se a sua secretária eletrônica informasse: 
“nenhuma mensagem”, quando você não tivesse nenhuma mensagem — “nenhuma 
mensagem?” tecnicamente ainda é uma mensagem, mas sua finalidade é representar a 
falta de mensagens. A mesma coisa é undefined — indica falta de dados. 


Um fragmento de 


os é indefinido 


Você não tem 
mensagens. 


sv: 


O. 


Resan Não há dados 
agui, portanto 
€ indefinido, 


o 


DONUTPRICE 


você está aqui » 


quando ele não ` 
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NaN não naan 


NaN NÃO é um número 


Assim como undefined representa uma condição especial de dados, existe um 
outro valor importante usado para indicar um caso especial de variáveis JavaScript: 
NaN. NaN significa Not a Number, e é o que a variável subTotal é atribuída, já 
que não há informações suficientes para realizar o cálculo. Em outras palavras, você 
tratou um valor inexistente como um número... e obteve NaN. 


4 
Um numero. 


o 4 
Não Cum uimero! 


subtotal = (0 + 12) * ? = NaN =á 


va ve essa informa 
ulo não pode ser realizado. 


o cale 


ção esta indefinida, 


Então, resolver o problema do NaN requer a inicialização da 
constante DONUTPRICE ao criá-la: 


const DONUTPRICE = 0.50; 


P: O que significa que os 
identificadores têm que ser 
especificos dentro de um script? 


R: A questão toda dos identificadores 
é servir como um nome especifico que 
pode ser usado para identificar um 
fragmento de informações em um script. 
No mundo real, é comum que as pessoas 
tenham o mesmo nome... porém, mais 
uma vez, as pessoas têm capacidade 
para lidar com esses "conflitos de 
nomes" e descobrir quem é quem. O 
JavaScript não é equipado para lidar com 
ambiguidade, então ele precisa que você 
diferencie cuidadosamente os diversos 
fragmentos de informações usando 
nomes distintos. Isso pode ser feito 
verificando se os identificadores dentro 
do seu código de script são específicos. 


P: Cada identificador que eu criei 


tem que ser especifico, ou especifico 
apenas em um determinado script? 
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Não existem 
perguntas idiotas 


R: A singuiaridade do identficador 
só é realmente importante dentro de 
um único script e, em alguns casos, 
somente dentro de certas partes de 
um único script. Porém, lembre-se de 
que scripts para grandes aplicações 
Web podem se tomar muito grandes, 
dispersos por muitos arquivos. Neste 
caso, toma-se mais desafiante 
assegurar a singularidade entre todos 
os identificadores. A boa notícia é que 
não é terrivelmente difícil manter a 
singularidade do identificador em seus 
próprios scripts, contanto que você seja 


o mais descritivo possível ao nomeá-los. 


Poainda não entendi bem quando 
usar letras maiúsculas (Camelcase) 
e quando usar letras minúsculas 


(camelCase). O que está acontecendo? 


R: Camel case (com a primeira 
palavra em letra maiúscula) só se aplica 
à nomeação de objetos em JavaScript, 
sobre a qual conversaremos no Capitulo 
9. Letras minúsculas se aplicam a 


NaN é um valor que 
não é um número, 
mesmo que voce esteja 
esperando que o valor 
seja um número. 


variáveis e funções, e é igual a Camel 
case, exceto que a primeira letra do 
identificador é em letra minúscula. Então, 
camel case significa que você nomearia 
um objeto Donut, enquanto o uso de 
letras minúsculas (camelCase) significa 
que você nomearia uma função getDonut( 
) e uma variável numDonuts. Não existe 
um nome bonitinho para constantes — 
eles são todos em letras maiúsculas. 


TPP: Dados de texto e booleanos são 
considerados NaN? 


R: Teoricamente sim, já que 
definitivamente eles não são números. 
Mas na realidade, não. A finalidade 
de NaN é indicar que um número não 
é o que você pensa que ele é. Em 
outras palavras, NaN não é bem uma 
descrição de dados JavaScript, como 
é um indicador de erro para tipos de 
dados de número. Normalmente, você 
só encontra NaN quando realiza cálculos 
que prevêem números, mas que por 
alguma razão são determinados dados 
não-numéricos para se trabalhar. 
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Enquanto isso, de volta ao Duncan's... 


De volta ao Duncan's Donuts, as coisas têm ido de mal a pior. Em vez de caixas 
vazias, agora existem donuts por toda parte — de alguma forma, cada pedido está 
sendo super calculado. Duncan está chocado com as reclamações de sobrecarga de 
donuts e fraude de massa. 


DOM aid Duncan's Just-In-Time Donuts So 
Duncan's Just-In-Time Donuts 
All donuts 50 cents each, cake or glazed! 
Name: Freg 
# of cake donuts: 


# of glazed donuts: 
Minutes 'til pickup: 


Eu não entendo. Comecei 
com poucos donuts e 
cheguei a muitos. 


O chemte só, pediu 9 4 
z > donvts, mas ele de alguma dp 


forma acabou pesando mais, 


O que poderia ter dado errado em relação à manipulação da quantidade de 
informações sobre donuts? 
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tipos diferentes de adição 


Você pode adicionar mais do que número 


Em JavaScript, contexto é tudo. Especificamente, é importante o tipo de dados 
que você está manipulando em um determinado fragmento de código, não 
apenas o que você está fazendo com os dados. Mesmo algo tão simples como 
adicionar dois fragmentos de informações pode produzir resultados muito 
diferentes dependendo do tipo de dados envolvido. 


1+2=3 “do” + “nuts” = “donuts” 
| 
| 
J Pelavpa elegante 
4 para manter 
Essas coisas 
Adição numérica Concatenação de string unidas”, 
dicionar dois números realiza o Adicionar duas strings também 
que provavelmente você epen realiza o que provavelmente você 
— produz o resultado da adição espera, mas é muito diferente da 
matemática dos dois valores. adição matemática — aqui as strings 
estão ligadas de ponta a ponta, 


Sabendo que essas strings de texto são adicionadas diferentemente 
dos números, o que você acha que acontece quando se faz uma 
tentativa de adicionar dois números textuais? 


Adição, concatenação, o que 


Ma» = 9 e 
esta acontecendo: 


O JavaScript realmente não se importa com o que está dentro 

de uma string de texto — tudo é caractere para o JavaScript. 
Portanto, o fato de que as strings contêm caracteres numéricos 
não faz nenhuma diferença... a concatenação de string é realizada, 
resultando em um efeito inesperado se a intenção cra a 
adição numérica. 


si” 4 “2” = “12” ER 


[2] resultado é uma PRESTE ATENÇÃO! 
string que não 1 Concatenar strings acidentalmente, 
quando você tem intenção de adi- 


cionar números, é um erro comum 
em JavaScript. Certifique-se de 
converter strings em números antes 
de adicioná-las, se a sua intenção 
for adição numérica. 


Coma são strings e re parace rem em 
Eae; me pouca com a adição 
não numeros, elas sao ea 
matematic 
adicionadas com o uso da i 


concatenação de string. 
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parselnt() e parseFloat(): convertem texto em número 


Apesar do problema da adição / concatenação, existem situações legítimas onde 
você precisa realizar uma operação matemática com um número que armazenou 
como string. Nesses casos, você precisa converter a string em um número 
antes de realizar qualquer operação numérica com ela. O JavaScript oferece 
duas funções úteis para aplicar este tipo de conversão: 


— 


: ã Forni i 
Fornece uma string para essa fanção  “OrAece uma string para essa função e ela converte a 
c ela converte a string em um inteiro. ng em um número (decimal) de ponto flutuante. 


Cada uma dessas funções embutidas aceita 
uma string e retorna um número, após 
concluir a conversão: 


up 
parse LmtO transforma Vem. o < 
i 2 sa resultado é a adição 
fica de / e 2. 
E 4 parsfine (12º) ade matematica de / € 
A string apa 


convertida no número 2. 


Lembre-se de que as funções parseInt() 

e parseFloar() não garantem que vão 
funcionar sempre. Elas são tão úteis quanto 
as informações que você fornece a elas. Elas 
se esforçarão ao máximo para converter as 
strings em números, mas a idéia é que você 
deveria fornecer strings que só contivessem 
caracteres numéricos. 


Não se preocupe se 


essa coisa de função 


parseFloat (“$31.50”) = NaN i aae fama Pondo 
Ea ' confusa. 
Você conhecerá os verdadeiros fatos 
Ea ho by funções mais adiante — por 
um problema Si sobre as funç p 
Ésse codigo € yi + y urpresa, surpresal ora, tudo o que realmente precisa saber 
porque o caractere O resultado não é é que as funções permitem que você 


confunde a função. um número (Mota passe informações para elas e que depois 
Number), 


devolvem algo em troca. 
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quando as coisas não fazem sentido 


Por que donuts extras estão sendo pedidos? 


Examinemos cuidadosamente o formulário de pedido de donuts com hord marcada. 
Somos capazes de descobrir o porquê de tantos donuts serem acidentalmente 
encomendados... 


soa Duncan's Just-In-Time Donuts O 


Duncan's Just-In-Time Donuts 
All donuts 50 cents each, cake or glazed! 


Name: jAlan 


# of cake donuts: |15 
# of glazed donuts: k dozen 
Minutes “til pickup: | 10 
Subtotal: [531.50 
Estão sendo cobrados mais Tax: [$2.91 
donuts do Bee na verdade - 63441 
estão sendo Pedidos... mas Tom: ; 
prantos mais? Place Order 


Done 


Podemos dividir o subtotal pelo preço de 


cada donut... e a resposta é quantos donuts 
foram pedidos, 
O subtotal do 
pedido, 
2 831,50 / $0,50 = 63 donuts N 
O número total de donvts 
O preço por donut. realmente TER hummm, 

Isto se parece muito com o problema da adição de string 


pat! 


numérica, especialmente se levar em consideração aqueles dados, embra a Cr = JA 
de formulário que são sempre armazenados como strings, 
independentemente do que seja. Embora os números sejam 
digitados nos campos do formulário, do ponto de vista do 
JavaScript, eles realmente são apenas texto. Assim, só precisamos 
converter as strings em números reais para evitar que uma adição 
numérica seja mal interpretada como uma concatenação de string; 


Parece semelhante, não? 
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Aponte seu lápis 
~N Usando os fragmentos de dados abaixo para extrair 
os conteúdos dos campos-de quantidade de donuts 
do formulário, escreva as linhas de código ausentes 
na função updateOrder() do Duncan, de modo que as 
quantidades de donut sejam convertidas de strings 
para números. 


document .getElementById (“cakedonuts”) .value 


4 
ga Ésse codigo obtém o nimera de 


/ 
Esse codigo extrai o numero donuts simples di 
JA com cobertura usuario no formulário, 


de danv a 
digitado no formulario, 


document .getElementById (“glazeddonuts”). value 


function updateOrder () { 

const TAXRATE = 0.0925; 
const DONUTPRICE = 0.50; 
var numCakeDonuts = 


var numGlazedDonuts 


if (isNaN (numCakeDonuts)) 
numCakeDonuts = 0; 

if (isNaN(numGlazedDonuts)) 
numGlazedDonuts = 0; 

var subTotal = (numCakeDonuts + numGlazedDonuts) * DONUTPRICE; 

var tax = subTotal * TAXRATE; 

var total = subTotal + tax; 

document .getElementById (“subtotal”).value = “$” + subTotal.toFixed(2); 

document .getElementById (“tax”) .value = “$” + tax.toFixed(2); 

document .getElementById (“total”) value = “$” + total.toFixed(2); 
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Aponte seu lápis 
Solução Usando os fragmentos de dados abaixo para extrair 

os conteúdos dos campos de quantidade de donuts 

do formulário, escreva as linhas de código ausentes 

na função updateOrder() do Duncan, de modo que as 

quantidades de donut sejam convertidas de strings 

para números. 


document .getElementById (“cakedonuts”) .value 


document . getElementById (“glazeddonuts”) .value 


1 
Ja que ambos o5 “o p 
e it e 
Zo inteiros, parse 
sada na conversão. 


ânction updateOrder() ( 
const TAXRATE = 0.0925; 
const DONUTPRICE = 0.50; 
var numCakeDonuts = 


seLnt document ge té leme, Tatcatedanv ts value); 


var numGlazedDonuts = 


if (isNaN (nunCakeDonuts)) 
numCakeDonuts = 0; 

if (isNaN(numGlazedDonuts)) 
numGlazedDonuts = 0; 

var subTotal = (numCakeDonuts + numGlazedDonuts) * DONUTPRICE; 

var tax = subTotal * TAXRATE; 

var total = subTotal + tax; 

document .getElementById (“subtotal”) .value = “$” + subTotal.toFixed(2); 

document .getElementById (“tax”) .value = “$” + tax.toFixed(2); 

document .getElementById (“total”) .value = “$” + total.toFixed(2); 


A sunção PaFixedO arredonda 
os valores em dolar para duas 
casas decimais. 
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= Embora não seja uma condição expressa m NaN significa Not a Number (não é um 


do JavaScript, nomear as constantes com número), e é usado para indicar que um 
LETRAS MAIÚSCULAS e as variáveis em fragmento de dados não é um número, 
letras minúsculas (camelCase) é uma boa quando o que se espera é que ele seja. 
ponvorão da foiicação. m A concatenação de string é muito diferente 
æ | Inicialize sempre as constantes ao criá-las, e da adição matemática, embora ambas usem 
inicialize as variáveis sempre que for possível. o conhecido sinal de adição (+). 
m Se uma variável não for inicializada, ela m As funções embutidas parselnt() e 


permanece indefinida (undefined) até que em parseFloat() são usadas para converter 
algum momento seja atribuído um valor a ela. strings em números. 


Você descobrirá o problema... 


Duncan está impressionado com o código JavaScript que você 
criou para fazer a correção. Ele finalmente está recebendo os 
pedidos corretos... e os negócios estão prosperando. 


OQA Duncaris pust.o-Time Donas 


Duncan's Just-in-Time Donuts 
Al donuts 50 cents oach, cake or glazed! 
Name: Eng 


dot cake donuts: e” h 
# ot glazea conus: [5 — 
Minutes tá piu: m 

Sat pa ——— 


wjn mm 


Totat a37 Az 


Piace Order | 


Ótimo, você conseguiu com que 
o sistema de pedidos on-line 
funcionasse perfeitamente! 


Obviamente, é arriscado supor que alguns ajustes 
rápidos aqui e ali resolverão seus problemas 

por toda a eternidade. Às vezes, os problemas 

5 mais irritantes são revelados por forças externas 


inesperadas... 
i você estásquip 69 


O “d'oh”2 se complica 


Duncan descobre espionagem de donuts 


Duncan adquiriu um novo problema: um concorrente astucioso . 
chamado Frankie. Frankie dirige um comércio de hotdog 

(cachorro-quente) do outro lado da rua, e que agora está 

oferecendo café da manhã. O problema é que Frankie está 

jogando sujo e enviando pedidos falsos de donut sem nomes. 

Então agora nós temos pedidos sem clientes — e isso não é bom. 


Duncan's Just-In-Time Donuts so 


Duncan's Just-In-Time Donuts 
AF donuts 50 cents each, cake or glazed! 
Name: 


# of cake donuts: |18 
# of glazed donuts: |30 


Minutes ‘ti pickup: Fifteen 
Subtotal: EMO e 
PO edu 


Tax [52.22 
Totat: [526.22 


Embora nenhum 
= nome Lenha sido 
digitado, a pedido 
for aceita, 


Não estou preocupado com meus 
concorrentes, apenas preciso tornar 
o código mais esperto em relação à 

aceitação de dados. 


Duncan está desperdiçando seu precioso tempo, 
energia e donuts preenchendo pedidos falsificados... 
e ele precisa que você verifique se todos os dados 
do formulário foram digitados antes de permitir a 
aprovação de um pedido. 
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Use getElementByld() para extrair dados do formulário 


Para verificar a validade dos dados de formulário, você precisa de uma forma 
para extraí-los da sua página da Web. A chave para acessar um elemento de 
página da Web com JavaScript é o atributo id da tag HTML: 


<input type="text” id="caked * name="cakedonuts” /> 


Llememo de informação 
HTML da quambidade de 


Oatritutoidês que você pa 
usa para acessar o TE de 


Ê 7 èi : 
formulario em codigo Vava Script, # of cake donuts: [18 t 


O JavaScript permite recuperar um elemento de página da Web com seu Tecnicamente 

ID usando uma função chamada getElementByldQ. Essa função não 4——— settlememt Sy LAO 
extrai diretamente os dados de um elemento, mas em vez disso fornece o é um melado na 
próprio campo HTML como um objeto JavaScript. Você então acessa os objeto document e 


dados através da propriedade value do campo. 


document .getElementById () 
e 


Forneça o ID de um elemento em uma 
a esse método e ele lhe dará o E 


não uma função, 


página da Web 


mesmo elemento de volta, que pode então ser 
o 


usado para acessar os dados da Web. 


D metodo Não molhe objetos, propriedades e métodos 
i lementby L40 l por ora. 
J re i Relaxe O JavaScript oferece suporte a um tipo de dados 
Fence ao abjero r 3 
per 7 avançado chamado objeto que permite fazer 
document. algumas coisas realmente legais. Na verdade, a própria linguagem 


JavaScript é apenas um punhado de objetos. Conversaremos mais 
sobre objetos ainda neste livro — por ora, saiba que um método é 
muito parecido com uma função e uma propriedade é muito parecida 
com uma variável, 


document . getElementById aan é a chave 


para acessar um 


document . getElementById (“cakedonuts”) .valus elemento. 


A propriedade do valor pe 
lhe da acesso aos dados, 


Com este código em mãos, agora você está pronto para verificar os dados do formulário do 
Duncan para certificar-se de que os campos não estão vazios, antes de aceitar um pedido. 


vocêestáaquiv T1 


você preencheu tudo? 


Valide os dados do formulário Web 


Você precisa conferir para ter certeza de que um nome foi digitado no formulário. 
Não digitar o número de minutos até a coleta também pode ser um problema, já 
que a idéia central é oferecer donuts quentes com hora marcada. Então, você precisa 
assegurar-se de que ambos os fragmentos de dados foram preenchidos e validados. 
Verificar dados vazios em um campo de formulário L 
é uma questão de conferência para ver se o valor de Pedido de donuts. 
campo do formulário é uma string vazia (“”. 


FAR TUS Campo de 
Name: 4 


formulario 
yazo. 


Beh te NT oo hr 7 


document . getElementById (“name”) .value 


Se o valor é 
uma string 
vazia, Hemos um 
Se o valor de campo do nome for uma string vazia, então você sabe que ~“ ~ Problema, 
o pedido precisa ser interrompido e o usuário deve ser solicitado a digitar aiii 
o nome dele, A mesma coisa acontece com o campo de minutos, exceto 
se também for útil dar um passo adiante e procurar ver se os dados 
naquele campo são números. A função isNaNQ embutida é o que torna j o n 
essa verificação possível — você passa um valor para ela e ela diz se o Uma stîng vazia 
valor não é um número (true) ou se é um número (false). é um indício de 


Dados de formulário que e campo do 
inválidos — na verdi = 
Minutes ‘tl pickup: fificen Z ad ade, não Formulário não 


possui dados. 


isNaN (document . getElementById (“pickupminutes”) .value) ; 


isNalJO 
verifica seum 
velar não é um 


Ses valor for true, os dados 
são números, então o pedido 
não pode ser processado, 


—3 true 


número, 
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; Imãs de geladeira JavaScript 
os 
a A função placeOrder() é onde ocorre a validação das informações de nome 


e dos minutos para coleta. Use os imãs para terminar de escrever o código 
que verifica a existência das informações do nome e dos minutos para coleta, 
e verifique se os minutos para coleta digitados são números. Você precisará 
usar cada imã e alguns imãs mais de uma vez. 


Isso significa que uma 


“aço é um teste de dições pode 
£ é usada para testar uma ísseeum , de duas condições p 


E isa e E 
condição e depois realizar uma igualdade uma cais resultar na ação PESA 
i é i zi ao faça 
ação de maneira apropriada — se igual à ou dae isso OU aguilo, em çi 


; ~ i Iguma coisa, 
isso, embão faça alguma coisa, Rae 


funbtion placeorder () ( 


precisa fornecer um nome antes de enviar o pedido. 


alert (“Voci 


else if (see 


tos até a coleta” + 


“antes de enviar o pedido.”); 
else 


F 
{i 


Envie o pedido para o servidor 
form. submit (); 


= + 


getElementById 
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solução dos imãs JavaScript 


Solução dos Imás de geladeira Javascript 


| = A função placeOrder() é onde ocorre a validação das informações de nome 
e dos minutos para coleta. Use os imãs para terminar de escrever o código 

| que verifica a existência das informações de nome e dos minutos para coleta, 
e verifique se os minutos para coleta digitados são números. Todos os imãs 
são usados e alguns são usados várias vezes. 


r dizendo: se o 
z y Ar vi, estamos dig 
ao dizi se o na do nome Isso verifica seo vo, estiver vazio, OU seo 
estiver vazio, entao dispa Rae 
um alerta go faga i valor do campo de valor não € um numero. 


3 


1 
ee iguala. 
alguma coisa diferem mae 


EN DESSE getElementById 
Eve TO O NUMETO À neo 


“antes de enviar O pedido.” 


else 
4! Envie o pedido para O ser 


form. submit () 7 


vidor 
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Você salvou o Duncan's Donuts... mais uma vez! 


O novo e aperfeiçoado formulário de donuts na hora marcada com validação de 
dados colocou um fim na espionagem de Frankie, e também tornou a página mais 


robusta para os clientes reais. Usar JavaScript para proteger a integridade dos dados 


digitados pelo usuário é um ganho mútuo, especialmente no implacável setor de 
café da manhã! 


eea Duncan's Just-In-Time Donuts sea 


Duncan's Just-In-Time Donuts 
Ali donuts 50 cents each, cake or glazed! 
Name: 
# of cake donuts: [I8 
# of glazed donuts: p es 
Minutes ‘til pickup; fifteen 
Subtotál: [524.00 
Tax [52.22 
Total: [526.22 


Agora, deixar o 
campo do nome vagia 
Fem como resultado 


iso, Qo inves 
um aviso, 


de permitir que o 
pedido seja aprovado. 


dim 
Dados não-numéricos 
não são mais um gape aene 
problema nó campo de aana u 


minutos para coleta. 


E] 


I'm sorry but you must provide the number of minutes 
until pick-up before submitting an order. 
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pergunte a eles... você sabe o que perguntar 


P: Como o sinal de adição (+) sabe 
que é para adicionar ou concatenar? 


R: Como muitas coisas no JavaScript, 
a funcionalidade é determinada pelo 
contexto. Isso significa que o sinal 

de adição examina duas coisas 
“adicionadas” e decide se adiciona ou 
as concatena numericamente como 
texto, com base em seus tipos de 
dados. Você já sabe que “adicionar” 
duas palavras significa uni-las de ponta 
a ponta. Mas problemas podem ocorrer 
ao supor erroneamente que você está 
trabalhando com um tipo de dados, 
quando na verdade é um outro. Esse 

é um dos motivos pelo qual é sempre 
uma boa idéia conferir para certificar-se 
de que você fomece dados numéricos 
ao planejar uma adição numérica, e 
texto por texto. 


P: o que acontece se você tentar 
adicionar uma string a um número? 


R: Como no JavaScript, a conversão 
de número para string é automática. 

A mistura dos dois tipos de dados em 
uma adição resulta sempre em uma 
concatenação de string. Então, primeiro 
o número se converte em uma string 

e, em seguida, as duas strings se 
concatenam. Se pretende adicionar 
explicitamente a string em um número 
usando parselnt() ou parseFloat(). 


P: O que acontece se usar 
parselnt() para converter uma string 
que contém um número decimal? 


R: Não se preocupe, não pega fogo. 
Tudo isso que acontece é devido ao 
JavaScript supor que você não se 
importa com a parte fracionária do 
número, então ele retorna apenas a 
parte inteira do número. 


P: Como o atributo HTML id 
liga os elementos Web ao código 
JavaScript? 
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Não existem 
perguntas idiotas 


R: Pense no atributo id como um portal 
através do qual o código JavaScript 
acessa o conteúdo HTML. Quando as 
pessoas dizem que o código JavaScript 
é executado em uma página da Web, 
eles não querem dizer literalmente a 
página da Web em si — eles querem 
dizer o navegador. Na realidade, o 
código JavaScript está razoavelmente 
protegido do código HTML, e só se pode 
acessá-lo através de mecanismos muito 
específicos. Um desses mecanismos 
envolve o atributo id, que permite ao 
JavaScript recuperar um elemento 
HTML. Marcar um elemento Web com 
um ID permite que o elemento seja 
encontrado pelo código JavaScript, 
abrindo todas as possibilidades de se 
programar um script. 


P: Isso é muito vago. Como, 
especificamente, o código JavaScript 
acessa um elemento HTML? 


R: O método getElement8yiao 

do objeto document é a chave para 

se acessar um elemento HTML do 
JavaScript, e esse método usa o atributo 
id do elemento para encontrá-lo na 
página, Os IDs HTML são como os 
identificadores JavaScript que devem ser 
específicos dentro de uma determinada 
página. Caso contrário, o método 
getElementByld(teria dificuldades em 
saber qual elemento Web retomar. 


E Eu sei que você disse que 
conversaremos mais sobre o assunto 
no Capitulo 9, mas os objetos já 
apareceram algumas vezes. Quais 
são? 


R: Vamos nos adiantar aqui, mas não 


conte para ninguém. Objetos são um 
tipo de dados JavaScript avançado que 
pode combinar funções, constantes. 
e variáveis em uma entidade lógica. 
Um método é apenas uma função 
que faz parte de um objeto, enquanto 
uma propriedade é uma variável ou 
constante em um objeto. Em nível 
prático, o JavaScnpt usa objetos para 
representar quase tudo — a janela 

do navegador é um objeto, como o 
documento de página da Web. Por 
isso, o método getElementByld() 
deve ser chamado através do objeto 
document - ele é parte do objeto que 
representa a página da Web inteira. 
OK, de volta ao Capítulo 2... 


P: Ainda não entendi a diferença 
entre um elemento de página 

da Web e seu valor. O que está 
acontecendo? 


R: Os elementos de página daWeb 
são expostos ao JavaScript como 
objetos, o que significa que eles 
possuem propriedades e métodos que 
você pode usar para manipulá-los. 
Uma dessas propriedades é value, 
que contém o valor armazenado no 
elemento. Como exemplo, o valor de 
um campo de formulário são os dados 
digitados dentro do campo. 


P: Por que é necessário saber se 
um valor não é um número? Não 
faria mais sentido verificar se ele é 
um número? 


R: Boa pergunta. Isso se resume 
no motivo pelo qual você se preocupa 
se um valor é um número ou não. 

Em muitos casos, a hipótese é a de 
que esteja lidando com um número, 
então faz sentido verificar a exceção 
(o inesperado). Verificando NaN, você 
é capaz de tornar o código de script 
de tratamento de número mais robusto 
e, com sorte, minorar um cálculo 
estranho que envolve um não-número. 
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Empenhe-se pelas informações claras do usuário 


Agora que o Duncan não está mais apagando fogo, ele realmente precisa 
melhorar a experiência do usuário com o formulário de donuts com hora 
marcada. Da mesma forma que o símbolo de “donuts quentes” é intuitivo para 
as pessoas que passam na frente da loja, é necessário que o formulário on-line 
também seja. Duncan sabe que normalmente os donuts são pedidos e servidos 
em dúzias. Poucas pessoas pedem 12 ou 24 donuts — elas pedem 1 ou 2 dúzias 
de donuts. Ele acha que o formulário de donuts deve permitir que os usuários 
digitem os dados da forma mais natural possível. 

O problema é que o script atual não leva em consideração que o usuário digite a 
palavra “dúzia”, ao especificar a quantidade de donuts. 


806 -Duncan's Just-in-Time Donuts —— < 


Duncan's Just-In-Time Donuts 
All donuts 50 cents each, cake or glazed! 

Name: ierde 

# of cake donuts: |3 dozen 

# of glazed donuts: 

minutat pikupo ooo 

Subtotat: [51.50 


e 
Tax: |S0.14 


Total: |$1.64 


Place Order 


é e» "m 

duzias de 
donuts se converte 
no numera $ 


` 
a raças à 
função PS 


parseInt (“3 dozen”) 


3 
O script não reclama quando o usuário digita a palavra “dúzia” Pai 
ao lado do número... a função parseInt) ignora qualquer texto 


/ 
presente depois de um número em uma string. Portanto, a palavra Issoeum 
ça ean 7 ~ 
“dúzia” é descartada e tudo que resta é o número. numero, não uma 


E) string. 


Poder do 
Cérebro 


Existe a possibilidade de o script do donut permitir que os usuários digitem um 
número ou um número e a palavra “dúzia” para pedir por dúzias? Como? 
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mais barato por dúzia... ou não 


É possível pesquisar a palavra 
“dúzia” no texto digitado pelo 
usuário? 


Se o usuário quiser uma “dúzia,” multiplique por 12! 
A opção “peça por dúzia” pode ser adicionada ao script do 
donut, ao verificar as informações do usuário para a palavra 
“dúzia” antes de calcular o subtotal. Se a palavra “dúzia” 
aparecer, multiplique o número por 12. Caso contrário, use o 
número no estado em que se encontra, já que ele se refere a 
cada donut. 


# of cake donuts: B dozen ~ 


# of cake donuts: 
parseInt(“3 dozen”) 
o númera, digita, 
E igitado É multiplicado 
parseInt (“18”) por (2.ja gue a palavra pára 
O número digitado aparece nos dados informados. 
é o número exato 3+ 12= 
de donuts 
encomendados. 18 
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TETT A função personalizada parseDonuts() é responsável pelo 
= = JavaScript processamento dos dados digitadas referentes à quantidade 
== pronto para de donuts. Ela, primeiro, converte os dados em número e, em 
assa seguida, verifica a aparição da palavra “dúzia” nos dados digitados. 
Se “dúzia” aparecer, o número de donuts é multiplicado por 12. 
Obtenha essa receita em ttp:/ /wum:beadfirstlabs.com/ books/ bjs). 


function parseDonuts (donutString) { 


numDonuts = parseInt (donutString); e——— Venitigve sea palavra 
1= 1) 


if (donutstring. indexof (“dozen”) 


numDonuts *= 12; 
return numDonuts; es 
} 
4 
es ES é número 
de donuts por fls 


duzia aparece nos 
dados digitados, 


Como analisar dúzias de donuts 


A função parseDonuts() é chamada na função updatcOrder(, 
que é quando o subtotal e total são calculados a partir dos dados 


digitados pelo usuário. 


Pega o numero de donuts 


Znicialiga as dvas á 
viario. 


constantes, do campo do formi 


function updateOrder() { 
const TAXRATE = 0,0925; 
const DONUTPRICE = 0.50; 
var nunCakeDonuts = ParseDonuts (document. getElementById (*cakedonuts”) value); 
var numGlazedDonuts = parseDonuts (document .getElementById ("glazeddonuts”) value) ; 
if (isNaN (nunCakeDonuts) ) 4 x s 
niscakengonta = 0s o Seo numero de donuts digitados não 
if (isNaN(numClazedDonuts)) for um numero, defina- como Ø, 
numGlazedDonuts = 0; Ea 
Jar subTotal = (nunCakeDonuts + numGlazedDonuts) * DONUTERICE; 
Var tax = subTotal * TAXRATE; A fo 
y aS To €o 
var total = subTotal + tax; je Calcula o subtotal, o imp: 
document .getElementById (“subtotal”) .value = “$” + SubTotal. toFixed (2); 
document .getElementById (“tax”) .value ="$" + tax.toFixed(2); 
document .getElementByTd (“total”) .value = “$” + total.toFixed(2); 


s 
Mastra os va lor e. Prresonda as valores 
né pgs Em dolar para dvas cases 
decimais Ccentavos), 


você está aqui » 


donuts em movimento 


Donuts com hora marcada, um sucesso incrível! _ 


A vida está ótima, agora que o Duncan e sua idéia de donut quente com hora 
marcada foi inteiramente concretizada em uma página acionada com JavaScript, 
que valida cuidadosamente os pedidos digitados pelo usuário. 


Agora, os amantes de donut 


podem fazer seus pedidos 
on-line de donuts quentes e 
com hora marcada. 


fo/=:010 0 000 seRveD 


soe Duncan's Just-In-Time Donuts — s2 
Duncan's Just-In-Time Donuts 
All donuts 50 cents each, cake or glazed! 


Name: jAlan a 


# ot cake donuts: |15 
# of glazed donuts: [a dozen 
POO 


inutes ‘til pickup: 10 
Donuts quentes l = 
Tax: ($2.91 
i Com hora marcada! Total: [534.41 


| Piace Order | 
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Cruzadas do JavaScript 


Nem sempre os dados são armazenados em código 
JavaScript. Às vezes eles ficam armazenados nas linhas 
horizontais e verticais das palavras-cruzadas, onde eles 
esperam pacientemente que você os revele. 


Horizontal 


4. Quando você define o valor de um fragmento 
de dados ao criá-lo, você... 

6. Nome específico usado para referenciar um 
fragmento de dados. 

7. A palavra-chave do JavaScript usada para criar 
uma variável. 

9. 3.14, 11 e 5280 são todos tipos de dados. 

10. Convenção de codificação que envolve 

a nomeação de identificadores com letras 
misturadas, como em ThisIsMyName. 

11. Não é um número. 

12. Um fragmento de informação cujo valor 
pode mudar. 

13. Um fragmento de dados com um valor on/ 
off seria armazenado como este tipo de dados. 


Vertical 


1. Um fragmento de dados cujo valor não muda. 
2. Tipo de dados usado para armazenar 
caracteres, palavras e frases. 

3. Quando um valor não é atribuído a 

uma variável ou constante, os dados são 
considerados... 

5. Função JavaScript embutida usada para 
converter uma string em um inteiro. 

8. O processo de conferência para verificar se 
os dados digitados pelo usuário são precisos é 
chamado... 

10. A palavra-chave do JavaScript usada para 
criar uma constante. 
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solução das Cruzadas do JavaScript 


IR Solução das Cruzadas do JavaScript 
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RR ooir ss Pós TE 


Dobre a página na 
vertical para alinhar os (6) que todos nós queremos em 


dois cérebros e resolver a 2 
ER nossos dados de seript? 


/ 
8 e tumencombrodementes! 4 — 8 


= Gostoso. 
Existem muitas coisas que 


eu quero em meus dados de 
script. mas uma delas em 
particular vem à mente. 


=» 


As informações digitas pelo usuário 
são o tipo de dados que voce não 
deve confiar. É arriscado pressupor 
que os usuários dipitarão dados e 
verificado se estão OK. Uma solução 
com mais segurança 
nº armazenamento envolve o use de JavaScript. 
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3 explorando o cliente : 


E 
* Exploração do Navegador 


Olhe só pra esse cara. Ele é o 
cliente que todos sonham, vai 
por mim. Tem dinheiro, mas não 
consegue trabalhar sem alguns 
caras inteligentes como nós... 


Às vezes o JavaScript precisa saber o que está acontecendo no mundo 
à sua volta. Seus scripts podem começar como código em páginas da Web, mas no final eles 
vivem em um mundo criado pelo navegador ou cliente. Em muitos casos, os scripts inteligentes 
precisam conhecer mais sobre o mundo em que vivem. Nesse caso, eles podem se comunicar com o 
navegador para descobrir mais sobre ele. Seja descobrindo o tamanho da tela ou acessando o botão 
snooze do navegador. os scripts têm muito a ganhar cultivando seu relacionamento com o navegador. 


Triângulo amoroso entre JavaScript, cliente e servidor 


Clientes, servidores e JavaScript 


Ao clicar em um hyperlink ou digitar uma URL em 
seu navegador web, o navegador solicita a página em 
um servidor web, que então fornece a página de volta 
para ele ou para o cliente web. O JavaScript não insere 
a figura antes do navegador exibir a página. Então, o 
código JavaScript funciona de comum acordo com o 
navegador web para responder às interações do usuário (1) O navegador solicita a página ao 
e modificar a página de acordo com a necessidade. A servidor. 
parte do navegador web que executa o código JavaScript é 
chamada de interpretador de JavaScript. 


Cliente 


© O navegador exibe a 
eoo Duncan's Just-In-Time ponita i página. 
Duncan's Just-In-Time Donuts 


All donuts 50 cents each, cake or glazed! 

Tn n 

# of cake donuts: c po 
# of glazed donuts: [é dozen 4 


To >- = = 


Minutes 'til pickup: 
Subtotal: pan oa 


Total: [534.41 _ 4 


O JavaScript valida os 
=P ~ campos do formulário, E 
conforme o usuário 
digita os dados na I 


O codizo VavaScript 

executa intesralmente 

na cliente, sem exigir 

PIRATE, Quando uma página tiver sido fornecida 20 

: navegador, o servidor estará completamente fora da 

equação. Praticamente tudo que o JavaScript fizer 
daqui para frente é restrito ao navegador. Isso torna 
as páginas mais responsivas, já que clas não têm 
que esperar que o servidor processe e retorne os 
dados. Esse processo faz com que o JavaScript seja 
conhecido como uma linguagem de cliente. 
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image/jpeg. image/pjpeg, +- 


Aroa e iad riLIa/5.0 (Macintosh; U; Intel Mac oS 


o Hru dis onde 
estaapaçina. Página Apresentada 


<hemi> 
<head> 
<title>Duncan’s Just-1 


<link rel="stylesheet” t, 


tipt type="text/javascripi 
function updateOrder() { 


ias 

O UavaSeript Horna a 
pagina interativa, neste 
caso validando os dados 


digitados pelo usuario. 


Oosenvidorresponde 


com uma página. 


, 
function parseDonuts (donut String) ( 


1 


<div ias"frame”s 


<div Class="headingr>puncans 
div Claoseraubhoncing">AL1 donuts 50 cones sonir aiya 
<div id="left”> F 
SIN srom*donuttine pag" altar 
aÃ Pag" alt="oust-In-Tine Donuts” 5 
iderrighers 


ES each, cake or glazedi</aiv> 


«Submetido... 


Poder do 
Cérebro 


Existem outras tarefas que fazem mais sentido realizar no cliente do que no 
servidor? 
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não pergunte o que você pode fazer pelo seu navegador... 


O que um navegador pode fazer por você? 3 


O seu navegador web cliente é responsável pela execução 
do código JavaScript, onde os scripts acessam o ambiente 
do cliente. Por exemplo, um script pode obter a largura e 

a altura da janela do navegador, bem como o histórico de 
páginas da Web visitadas. Outros recursos interessantes 

do navegador que estão abertos ao JavaScript incluem 

um mecanismo de controle de tempo que funciona como ; 

um alarme de telógio e o acesso à Ea permitindo Métrica do navegador 

armazenar os dados que permanecem mesmo depois de A métrica do Navegador inclui vá; 
sair da página ou fechar o navegador. medidas associadas ao a 


da janela do navegador, à pági 

da Web visível e até eg me 

Rian sobre O fornecedor do 
OF € O número da versão, 


Histórico do navegador 
O histórico d 
Jista de páginas Te 
Você pode usar O à 
para acessar à lista de páginas 

e direcionar O navegador para 
uma delas, criando seus próprios 


controles de navegação. 


m RB 


Temporizadores 


Os temporizadores 
permitem acionar um 


Cookies são como variáveis fragmento de código 
que se armazenam no disco JavaScript depois de 
rígido do usuário através do transcorrido um tempo 
navegador, fazendo com que eles específico. 


permaneçam após uma sessão da 
Web. Em outras palavras, você 
pode sair de uma página e voltar 
e os dados ainda estarão lá. 


Esse recursos não são tudo o que o cliente tem a oferecer a seus scripts, 
mas eles devem lhe dar uma idéia de que há mais para o JavaScript do 
que existe dentro da página. De fato, existe uma série de situações onde é 
útil olhar além da página e obter uma ajudinha do navegador. 
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perguntas idiotas 
usado para interceptar dados da web conforme são 

P: Então, o JavaScript faz parte do cliente? retransmitidos do servidor para o navegador. No entanto, 

é possível escrever scripts que solicitem informações 
. i ao servidor e, em seguida, processem e exibam essas 

TR ui arg ni ram 

leitura do código JavaScript de uma página e que, em conversaremos sobre como usá-la no Capítulo 12. 

seguida, executa esse código. 


E: O JavaScript permite que você controle o cliente? 


P: Se o código JavaScript executa no cliente, como 
ele está relacionado ao servidor? R: Sim e não. Embora os navegadores web permitam 


R o acesso a certas partes do ambiente do cliente, eles não 
. ji i dão uma liberdade ilimitada ao JavaScript por razões de 

7 O código JavaScript normalmente não possui uma 

associação direta com o servidor web, já que ele executa segurança. Por exemplo, a maloria dos navegadores não 
exclusivamente no cliente. O JavaScript é comumente permite scripts para abrir e fechar janelas sem a aprovação 


do usuário. 


O iRock está muito feliz 


Lembra-se do iRock? O seu JavaScript fez tanto sucesso que Alan, 
um jovem empresário, comprou sua participação acionária. Mas ele 
o chamou de volta, porque existem alguns problemas... os usuários 
estão perturbados com o persistente estado de felicidade do 
iRock. Obviamente, todos nós queremos que nossos bichinhos 
de estimação sejam felizes, mas o iRock parece ter uma variação 
emocional rigorosamente limitada. 


Eu gosto da idéia de um bichinho de 
estimação estar permanentemente feliz, 
mas os usuários querem um pouco mais 
de realismo. Por isso, acho que você terá 
de revisitar esse código... 


Uma vez clicado... 
Sempre sorrirei! 


Bitan, ó nava proprietario do Q, 
jock, tle Fem grandes recursos 

e dinheiro para gastar, 
possi ivelmente com você. 


O problema do iRock tem a ver com as expectativas do usuário. 
A idéia por detrás de um bichinho de estimação virtual é que 

ele deveria se parecer o máximo possível com um bichinho de 
estimação real. O seu desafio é descobrir como aperfeiçoar o 
comportamento do iRock para torná-lo mais realístico. E parece 
que o navegador web cliente pode conter algumas das soluções 
para o problema do iRock... 


você está aqui» 89 


emoções do iRock 


O iRoek precisa ser mais responsivo - 
Vamos levar em consideração alguns possíveis comportamentos do iRock, com 
o objetivo de tentar fazer com que a rocha seja mais realística e cativante para 
o usuário, além de mais interativa. Teoricamente, o iRock deveria se tornar mais 
responsivo ao usuário, à medida que sua variação de comportamento emocional 
aumentasse. 


Faça o downlo sa 
ad do código mais rece: ñi 
2.0 em iyantarlahsiks cando ARA alias 


Rocha furiosa 
O iRock, de vez em 
quando, fica zangado sem 


nenhuma razão aparente 
fazendo com que o dono 
tenha que acalmá-lo. 
| Deprimida 
o iRock chora toda ei 
que a página é fechada, 
gro que o usuário 
a 9 navegador aberto 
evitar el 
Colapso. “tenha um 
Solitária 
O iRock volta a se sentir 
solitário quando é deixado 
sozinho, exigindo que o usuário 
clique nele periodicamente 
dando a ele atenção. 


Cérebro 


Quais desses comportamentos fazem sentido o iRock ter? Como você usaria o 
JavaScript para implementar esses comportamentos no script do iRock? 
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Eu gosto da idéia de uma rocha se 
sentir solitária depois de um tempo, 
porque é isso que os bichinhos de 
estimação fazem no mundo real. 
Podemos mudar o comportamento do 
iRock ao longo do tempo? 


O JavaScript informa quando o usuário está fazendo 
alguma coisa... e quando não está. 

A idéia de uma rocha se sentir solitária é interessante 

porque estimula o usuário a interagir com ela sem a culpa da 
sobrecarga, e o usuário é recompensado com uma resposta 
positiva do iRock. O desafio é usar o JavaScript de alguma 
forma para mudar esse estado emocional do iRock com o 
passar do tempo. À idéia é esperar por um certo tempo e, 

em seguida, mudar o estado do iRock, se o usuário não tiver 
clicado nele e o tempo passar. 


o temporizador É iniciado... 


ga 


O usuário não toca na rocha 
Por um período de tempo. 


mer S segundos, 
A rocha está feliz. por exemplo, 


A rocha está solitária, 
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o tempo está do meu lado, sim ele está 


Temporizadores associam ação ao tempo 
transcorrido 


O JavaScript permite o ajuste de temporizadores. Um 
temporizador JavaScript funciona como o alarme de um 
relógio: você diz a ele quanto tempo esperar e quando 

expirar o tempo, um certo fragmento de código executará. 
No entanto, ao contrário de um alarme de relógio, os 
temporizadores JavaScript são acionados quando tiver 
passado um certo período de tempo, o oposto do 
acionamento em um tempo determinado. Isso não é 
problema, significa apenas que você precisa pensar em termos 
de retardo de tempo, em vez das horas exatas do dia. 


D retardo controla a 
duração do temporizador. 


Mais tarde 


[2] temporizador inicia 
assim gue e ajustado. 


[o] temporizador expira 
retarda, 


Esse codigo é chamado 
quando o demporigador Os temporizadores ` 
expira, p 
5 permītem executar 
O legal em relação aos temporizadores JavaScript é que o códi, o Ji avaScri 
egal 


eles permitem executar qualquer código que você queira m 

ao expirarem. Algumas páginas da Web com dados que são depois de transcorrer 
modificados regularmente usam temporizadores para atualizá- 7 

los depois de um certo retardo, enquanto outros usam um certo período de 
temporizadores para detectar se o usuário não interagiu com a 

página durante um tempo. tempo. 
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Um temporizador decomposto . 


As duas peças-chave para se ajustar um temporizador no JavaScript são: 
1) estabelecer o retardo de tempo e 2) informar ao temporizador qual 
código executar quando o retardo transcorrer. O temporizador começa a 
contar a partir do momento que você o ajustar. 


O retardo de tempo é expresso em milésimos de segundo, que 


é a milésima parte de um segundo. Multiplique o número de 
segundos que você deseja por 1.000 para descobrir orname 
de milésimos de segundo. Por exemplo, 2 segundos são 2.000 


milésimos de segundo. 


o código que é executado quando o temporizador 
expirar pode ser qualquer código JavaScript que 
você deseje, inclusive uma única instrução, várias 


instruções (cada uma com uma terminação 
em ponto-e-vírgula) ou uma chamada para 
uma função embutida ou personalizada. 


e 


Prtualiza a pagina 
da Web. 


A; 
Tosta um outro temporizador, 


Quando os temporizadores JavaScript comuns expiram e o código do 
temporizador é executado, o temporizador é finalizado, e fim de papo. Esse 
tipo de temporizador é conhecido como temporizador de disparo único 
porque ele aciona um fragmento de código exatamente uma única vez. 
Também é possível criar um temporizador de intervalo, que ajusta vários 
intervalos em vez de um único retardo. Um temporizador de intervalo 
continua a chamar o código do temporizador repetidamente, após cada 
intervalo, até que você diga a ele para parar. Embora os temporizadores 

de intervalo com certeza tenham seu lugar, o temporizador de solidão do ș 
iRock é definitivamente um temporizador de disparo único. 


Correlacione abaixo os períodos de tempo em milésimos de segundo aos 
y seus equivalentes em segundos. 


Exercicio 
500ms 5 minutos 


300.000ms 5 segundos 


5.000ms 1/2 segundo 
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o tempo é limitado, aja agora 


dios Correlacione abaixo os períodos de tempo em milésimos de segundo aos 
N seus equivalentes em segundos. 


Solução do 
Exercício 


500ms 5 minutos 


300.000ms 5 segundos 


5.000ms 1/2 segundo 


Ajuste um temporizador com setTimeout() 


A função embutida JavaScript que possibilita os 
temporizadores (disparo único) é setTimeoutQ. Os 
dois fragmentos de informação que você precisará 
para a função são o temporizador de retardo e 

o código para executar quando o temporizador 
expirar (disponível em hH:/ /m:beadfirstlabs. com 
books/ hfsd/), mas não necessariamente nessa ordem. 


Eis um exemplo: 9 retardo do Pemporizadon 
e de 620. O, JO milésimas 

A tania selek PEA de segundo, sue sã LOD` 

temporizador de dispara Unico, Segundos ov /O minutos 


Cocais S “Wake up!');”, 600000); 


Nunca col A 
cologue virsulas 


/ 4 
O codigo UlvasSeript e pn 
fornecido à setTimeout coma kuando o temporizador Aii ET ca see Em 
uma string de texto, e por expira, uma caixa de E TESTA Aeee 
isso deve estar embre aspas. alerta é exibida, 


Essa chamada da função setTimeout() cria um temporizador que 
aguarda 10 minutos e, em seguida, exibe uma caixa de alerta. 


600.000 milésimos 
de segundos! 


Wake up! 
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Mais de perto: a função setTimeout() 
Eis a forma geral que a função setTimeout() assume: 


Inclui os dois arg- — 


Pe mentos de função, f 
£ ee é 


ES SESSE=D a 


O código a ser executado quando Separa si dois O retardo h retro 
mporizador expirar. Ria essi osde milesinas de instrução, 
Ro. segundo, 
Ajustar um temporizador de intervalo é semelhante a ajustar um temporizador Minutos em 
de disparo único, exceto se você chamar a função setIntervalQ no lugar de milésimos de 
setTimeout(). O resultado final do ajuste de um temporizador de intervalo é o segundo, 


código que executa repetidamente a cada término de retardo de intervalo: 


var timerID = setInterval (“alert (“Wake up!');”, 600000); 


A 
Keserva o LÌ do Ajusta o +emponigador 
N te O retardo do 
+emporizador. recorrem temporizadar pode 
ser es; 
em milésimos 
PRESTEATENÇÃO! de segundo. 
s į Um milésimo de segundo é uma 
(O minutos fração de um segundo. Então, se 
T você esquecer de usar os milésimos 
— E 4/0 minvtos, de segundo, acabará com alguns 
E" E 3 temporizadores absurdamente cur- 
= ig /O minutos,; tos (rápidos). 
Um temporizador = aea E “o minutos. 
de intervalo , o 
resulta no codigo WE "asi 
de temporizador - 
ve executa A 
V etidamente em 


imbenvalos regulares. 


nte seu lápis 


Escreva um código para alterar, após 5 minutos, a 
imagem do iRock de feliz para solitário. Dica: O ID do 
Antes de virar a pagina, elemento de imagem do iRock é rockImg, e o nome 
Lente esse podijo em sua sc do arquivo da imagem solitária é rock.png.* 

versão da página inock bm! 


para ver se funciona. 


Faça o download deste arquivo em: win attabooks.combr 
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solução inteligente 


Aponte seu lápis 
~ Solução Escreva um código para alterar, após 5 minutos, a imagem 


do iRock de feliz para solitário. Dica: O ID do elemento de 
imagem do iRock é rockImg, e o nome do arquivo da imagem 
Aspas e apastrofas são solitária é rock.png. 
alternados para aninharas 
funções adequadamente. / 


o retardo de cinco minutos 
€ calculado em milésimos de - 3 
Segundo, convertendo-se A imagem da iKack e arkerade,, O LD do 
primeiro para minutas (xCD) À imagem desininda-se um novo arquivo elemento 
€ €m seguida, para milésimos darocha de imagem ao atributo sredo de imagem, 
de segundo Cx/ OOD). solitaria: elemento de ER 


Agora o iRock se sente solitário! Za 


Certifique-se de ter feito as alterações detalhadas na sua irock. L 
html acima, e dê uma énfase ao iRock. Agora, o iRock demonstra 
solidão quando é deixado sozinho por cinco minutos (sem que o 
usuário clique nele). Esse retardo de tempo pode fazer com que / nik D) 
a rocha pareça carente, mas a idéia é manter o usuário ocupado. 
Além disso, o bichinho de estimação certo se conhece nas horas 
incertas! Ou algo parecido... 


Um temporizador inicia literalmente a 
comtagem regressiva do mormrbamte de l 
Hempo feliz que resta para o Rock, 


Você pode acelerar as alterações 
emocionais do iRock usando um 
retardo de tempo menor ao chamar a 

função setTimeout(). Essa é uma ótima 
maneira de testar o script sem ter que 
esperar pelo que vai acontecer. 


À felicidade agora TE 
7 

passa rapido pr b 

Rock, a se e muito 


mais realistico. 
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EE 


Solidão, 


explorando o cliente 


Acho que às vezes 
o cliente está certo 

= quanto mais emocional o 

iRock, mais cativante. 


Quando o Femporizadar 


Expirar, o estada de 
= Felicidade passa para 
, 
A 


Näo existem A 


perguntas idiotas 


P: sea idéia é fazer com que o iRock retorne 
sempre ao estado solitário após 5 minutos, por 
que não usar um temporizador de intervalo? 


R: A resposta tem a ver com que forma 

um temporizador de disparo único é usado. 
Embora a rocha seja capaz de se sentir solitária 
periodicamente, ela só fica sozinha após um 
período de felicidade. O temporizador é definido 
no clique inicial, a rocha se torna solitária 
quando o temporizador expirar 5 minutos depois 
e permanecer solitária até que cla seja clicada 
novamente. Isso não se parece com a regra 

de um temporizador de intervalo, é diferente 

do funcionamento de um temporizador de 
intervalo — ele acionaria a cada cinco minutos, 
independente do que o usuário faz. 


F: O que acontece se o usuário fechar o 
navegador antes de o temporizador expirar? 


R: Nada. O interpretador de JavaScript é 
desligado quando o navegador é fechado, e todo 
o código JavaScript pára, inclusive todos os 
temporizadores em andamento. 


P: Como rg criar um temporizador que 
acione o código a uma certa hora do dia? 


R: Como os temporizadores são baseados em 
retardo, e não em horas específicas, você precisa 
converter a hora do dia em um retardo. Isso 
pode ser feito subtraindo a hora atual da hora de 
acionamento desejada. Esse cálculo exige alguma 


ajuda do objeto de JavaScript Date, que você 
aprenderá mais no Capítulo 9. 


T: Eu tenho uma página com dados que se 
modificam e gostaria que ela atualizasse a 
cada 15 minutos. Como faço isso? 


R: Use a função setInterval() para definir 

um temporizador de intervalo de 15 minutos, 
que é 900.000 milésimos de segundo (15 

x 60 x 1000). Você precisa do código do 
temporizador para atualizar a página, que é 
realizado chamando-se o método reload() do 
objeto location, assim: location.reloadQ; Agora, 
o temporizador aciona a página atualizada a cada 
15 minutos. Obviamente, você também pode 
usar Ajax (Capítulo 12) para carregar os dados 
dinamicamente, em vez de atualizar a página. 


Ẹ: Entendo que um temporizador de 
intervalo continua indefinidamente. Como 
faço parar um temporizador de intervalo? 


R: Uma função chamada clearInterval() é usada 
para eliminar um temporizador de intervalo 

que tenha sido ajustado com setInterval(). A 
função clearInterval() exige que você passe o ID 
do temporizador de intervalo a ser eliminado, 

o qual é retornado pela função setInterval() 

ao criar o temporizador. Sim, as funções são 
capazes de retornar informações. Após reservar 
o valor de retorno de setInterval() em timerID, 
por exemplo, passe-o para o clearInterval() 
cancelar o temporizador, dessa forma 
clearInterval(timerID). 
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navegador exposto 


O navegador exposto 5 


Entrevista da semana: 
Confissões de um cliente web 


Use a Cabeça: Obrigado por abrir mão de um 
dia atribulado e sentar para batermos um papo. 
Navegador: Atribulado é a palavra certa. Como 
se eu não tivesse muito o que fazer com HTML 
e CSS, e todas as dores de cabeça processando 
páginas com aqueles dois personagens, agora eu 
tenho que pelejar com o JavaScript. E um animal 
completamente diferente. 

Use a Cabeça: O que você quer dizer? O 
JavaScript é selvagem e indomável? 

Navegador: Ah, não. Eu não quis dizer 
literalmente “animal”. Eu quis dizer que 

o JavaScript traz seu próprio conjunto de 
problemas específicos com que eu tenho 

que me preocupar. Agora tenho essa função 
completamente nova de ler o código JavaScript, 
esperando ansiosamente que ele não esteja 
codificado inadequadamente e, em seguida, 
executá-lo enquanto fico de olho no HTML e no 
CSS ao mesmo tempo. 

Use a Cabeça: Entendo. Como esses três se 
relacionam? 

Navegador: Felizmente, esse é o menor dos 
meus problemas. Esses três normalmente 
funcionam bem juntos, embora ocasionalmente 
o JavaScript se empolgue e deturpe algum código 
HTML. O problema é que normalmente não 

há nada que eu possa fazer em relação a isso, 
porque a minha função é basicamente fazer o 
que eu já disse. 

Use a Cabeça: Então, você se adapta a um estilo 
meio “bajulador”? 

Navegador: Suponho que haja uma forma de 
expressar isso, porém é mais correto dizer que 
eu valorizo a consistência acima de qualquer 
coisa.Faço tudo de acordo com as regras. Minha 
função é pegar o código que o servidor me 
fornece e fazer exatamente como ele diz. 

Use a Cabeça: Mesmo se você souber que está 
errado? 

Navegador: Faço o possível para resolver os 
problemas quando os vejo, mas é um trabalho 
difícil. Além disso, é um assunto para um outro 
dia (Capítulo 11). Pensei que fossemos falar 
sobre minha função como um cliente web. 
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Use a Cabeça: Ah, sim. Eu perdi o rumo. O que 
significa ser um cliente? 

Navegador: Bem, significa principalmente que 
eu permaneço na extremidade da recepção, 
recebendo as páginas após solicitá-las ao 
servidor. 

Use a Cabeça: O que isso tem a ver com o 
JavaScript? 

Navegador: Na verdade, muitíssimo. Como eu 
lido com todas as tarefas não muito agradáveis, 
como a de exibir as páginas da web e processar 
as entradas de informações do usuário, o 
JavaScript está lá, ao meu lado, colocando seu 
nariz e alterando tudo. Mas isso não é de todo 
ruim. Há muitas coisas legais que o JavaScript 
pode fazer que eu não ousaria fazer sozinho. 
Use a Cabeça: Tais como? 

Navegador: Bem, cu nunca assumiria a 
responsabilidade de fazer algo especial quando 
um usuário colocasse o mouse sobre uma 
imagem ou redimensionasse minha janela, por 
exemplo. O JavaScript, por outro lado, tem tudo 
a ver com fazer coisas especiais. Não é nada 
demais um script alterar a aparência da página 
ou, ao contrário, reorganizar o conteúdo em 
resposta às alterações do cliente, E por mim, 
tudo bem, porque o código JavaScript executa 
página por página, portanto só impacta uma 
página específica ou um site da web. 

Use a Cabeça: Você falou do JavaScript como 
se ele fosse uma outra entidade. O JavaScript não 
é você? 

Navegador: Ambos. Com certeza, o JavaScript 
faz parte de mim, mas você pode pensar nele 
como uma entidade própria, porque ele só pode 
acessar o cliente (eu) através de uma interface 
limitada. Em outras palavras, eu não dou ao 
JavaScript um acesso incontrolado a tudo sobre 
mim. Isso seria um pouco irresponsável, já que 
não posso controlar quem escreve os scripts e 
me pede para executá-los. 

Use a Cabeça: Entendi. Bem, obrigado por 
esclarecer algumas dessas coisas de cliente. 
Navegador: Fico contente em ajudar. 


Vários tamanhos de tela, várias reclamações 


Alan mal tinha terminado de pagar a transformação emocional do iRock a 

você, quando uma nova onda de reclamações começaram a transbordar de 
proprietários frustrados do iRock. Parece que o tamanho do iRock não é muito 
consistente, com alguns usuários relatando a “síndrome da rocha que encolhe”, 
enquanto outros experimentam um medo intenso das “formações parciais de 
uma rocha gigante”. Você é o cara que o Alan confia, portanto é hora de ganhar- 


algumr-dinheiro-extra para consertar o iRock novamente. 


4 
Outros usuarios 

, X Há 
Alguns usuários estão estão vendo apenas 
relatando sobre um Rock que é uma parte de um 
surpreendentemente pegueno. Rack gigante. 


Que esquisito. Eu me 
pergunto por quê? 


] Poder do 
Cérebro 


O que está acontecendo com os diversos tamanhos 
de rocha em navegadores diferentes? 
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tamanho importa 


Use o objeto document para obter a largura da janela do cliente 


O problema do iRock tem a ver com o fato de que o tamanho 

dele não muda quando o tamanho da janela do navegador muda. À sanala do cliente é 
Teso padecer dem atENCA considerar di yara i uia cial À janela do cliente é 

no tamanho do navegador em todos os computadores capazes apenas a parte da janela 
de navegar na Web, inclusive dispositivos portáteis pequenos r 

e computadores desktop com monitores gigantes. Você do navegador que exibe 
precisa de uma forma para verificar o tamanho da janela do 
navegador, que pode então ser usada como uma medida para uma pág ágina da web. 


redimensionar a imagem da rocha. 


A janela do cliembe combém a 
imagem da rocha €, no ertanto é o 
que voce é pode usar para descobrio 
cana pedronoo ii o Rack, 


a | io - The Vire) Pes a 
Pesca "> 
epar j 


“o 


document .bo entHeight 


Não faz S 
par Heda Jets do 
altura da cliente 
Je nela do 
cliente. 
cs 
A 
$ 
f- É importante distinguir a largura e altura da janela do 
Ec j cliente, se comparado a largura ¢ altura gera/ do navegador. 
Largura ~ A janela do cliente é apenas a parte da janela do navegador 
da janela do que exibe a página, o que significa que não incluí barras de 
cliente. título e barras de ferramentas. O tamanho do iRock deve ser 


calculado com base no tamanho da janela do cliente, e não 
no tamanho gera! da janela do navegador. 
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Use as propriedades do objeto document 
para definir a largura da janela do cliente 


O tamanho da janela do cliente 
está intimamente associado à 
página da web, que você acessa 
no JavaScript usando o objeto 


document. Esse é o mesmo chtmi> 


objeto usado para acessar RSE 
elementos na página com o 
método getElementByld(). 
As propriedades de body. i 
clientWidth e body. 


var userName; 


alert ('Clá, 


clientHeight do documento alert (“Eu gosto de atenção, “+ username +”. Cbrigada.”); 
s ) 
contém a largura e altura da else 1 
h : userName = pronpt ("Qual è o seu nome?”, “Digite seu nome aqui.”); 
janela do cliente. if (userName) 
alert (“Bom conhess + username + *."); 
, 
document .getElementEyId (“rockImg") .src = “rock happy.png”; 
setTimeout ("document .getE LemenrtById( 'rockIng') sre = *rock.png';”, 


, 
<pscripe» 
</head> 


<body onlcad=" 


umento 4, 
te visivel 


<title>iRock - The Virtual Pet Rock</title> 
<script type-"text/javascript"> 


function greetUser() į 
eu sou a sua pedra de estimação’); 


function touchRock() { 
1f (userName) { 


5 = 60 * 1000); 


'greetUser ();”> 


explorando o cliente 


(o) objeto document / 
7 

representa apropria 

pagina da web, / 


Opx; text-alignicenter”> 
ck.png” alte"iRock” style="cursorapointer” 


o existem 


perguntas idiotas 


Pa Só para esclarecer, qual a diferença entre um cliente 
web, um navegador, a janela de um cliente e a janela de 


um navegador? 


R: Sim, isso pode ser um pouco confuso. Em termos da 
Web em geral, refere-se a um navegador como um cliente web, 
porque está do lado do cliente de serviços de påginas da web. 
Dentro de um navegador, no entanto, o “cliente” assume um 
significado diferente porque ele se refere à área especifica da 
janela do navegador onde a página aparece. Então, a janela 
do cliente é uma área dentro do navegador que não inclui 
outras coisas como as barras de titulo, barras de ferramentas, 
barras de rolagem etc. 


ji Por que a janela do cliente é a medida preferida usada 
para redimensionar o iRock? ý 


R: A janela do cliente oferece uma medida melhor para 
redimensionar a imagem da rocha porque ela reflete o montante 
real de espaço no qual a imagem é exibida. Isso elimina as 
variações que são dificeis de explicar, como os complementos 
de barras de ferramentas e as diferenças naturais das janelas 
de navegadores de diferentes fornecedores de plataformas 
e navegadores. Por exemplo, o Safari no Mac possui um 
tamanho de janela de navegador diferente do Firefox no 
Windows, mesmo que a parte exposta de cada um — a janela 
do cliente - seja a mesma. 
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o quão grande é grande? 


Defina a altura e a largura da imagem do iRock 


Conhecer o tamanho da janela do cliente não é muito útil no script do iRock sem ser 
capaz de redimensionar a imagem da rocha. Felizmente, você pode tentar ajustar o 
tamanho de uma imagem usando JavaScript com uma pequena ajuda do CSS (mesmo 
que CSS não seja o seu estilo). As propriedades width e height de um elemento de 
imagem não só permitem inicialmente determinar o tamanho da imagem, como 
também redimensionar dinamicamente a imagem quando necessário. 


style.height 


A altura da imagem 
da rocha, 


À largura da imagem da rocha, 
s y 


O codigo HTML da 
magem da rocha é a 
chave para acessan as 


Existe um objeto style para cada elemento e página da web para 


que você possa acessar a largura e a altura de qualquer fragmento 
ou parte de uma página. Mas para acessar os estilos é necessário 


acessar primeiro o elemento de página da web, neste caso a Propriedades de estita 
imagem da rocha (se ainda não fez o download, pode obtê-lo da imagem, 
em htip:/ / www headfirstlabs.com/ books/ hfjs/). Isso requer o prático 
método getElementById() do objeto document: 
<img id=”rockImg” src="rock.png” alt="iRock” ... /> 
Ésse código acessa a altura 


da imagem da S 
document. getElementById (“rockImg”) style mergit 


Para alterar o tamanho da imagem do iRock, defina um valor para Defina a atura da imagem 
a propriedade de largura e altura. Configurar cada propriedade da rocha em (DO pixels 
individualmente dará certo, porque a outra propriedade se ajustará Lic 
automaticamente para manter as mesmas proporções da imagem: 


document . getElementById (“rockImg”).style.height = “100px”; 
Você não precisa definir a largura... ela sera dimensionada 


e se mantera proporcional à nova altura, 
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explorando o cliente 


O iRock deve ser dimensionado em relação à página 


Você ainda não tem uma estimativa de uso para alterar o tamanho da imagem da rocha, 
baseado no tamanho da janela do cliente. Como o tamanho da rocha pode mudar na 
proporção em relação ao tamanho da janela do cliente, precisamos definir o tamanho 
da rocha em porcentagem de tamanho da janela do cliente. 

Mas você deve basear o tamanho da rocha na largura ou na altura da janela do cliente? 
Como os navegadores tendem a ser mais firmemente forçados à direção vertical, é 
mais seguro basear o tamanho da imagem da rocha na altura da janela do cliente. 


(clientWindowHeight - 100) * 0.9 = rockImageHeight 


/ A attura da 3 wT 


janela do cliente. 


l 

(00 pixeis. JOR do gee restou 
ED verticalmente, 
E a 


"ri 
Esse cálculo explica o espaço vertical da rocha na 
página (100 pixels) e, em seguida, dimensiona a 
imagem da rocha em 90% (0,9) do que restou. Às 
vezes, cálculos como este exigem uma pequena 
tentativa e erro para testá-los e descobrir qùal 
funciona melhor. Você terá que tentar com o seu 
iRock para ver como ele funciona... mas, primeiro, 
há um código para ser escrito. 


ar” seu lápis 


Escreva o código para a função resizeRock() que deve 
redimensionar a imagem da rocha com base no tamanho 
da janela do cliente. Adicione também o código ao 
manipulador de evento onload para chamar resizeRock() 
além de greetUser() que já estava sendo chamada. 


function resizeRock() { 


$ 


<body onload= 


</body> 
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solução inteligente 


Aponte seu lápis 
Solução 


Sua função era escrever o código para a função 
resizeRock(), e também adicionar código ao manipulador 
de eventos onload para chamar resizeRock(). Lembre-se 
de verificar se greetUser() ainda está sendo chamada! 


O Famanho da imagem da 

4 
rocha e calculada com base na 
altura da janela do cliente. 


=. ” 
<body onload=  nesiseksckO' 


-- PESTgeR ock y greet serO 


ANTEC Es. 


</body> 


Duas sunções diferentes são 
PR 


P imi» DO pixels 

hamadas quando a paginae / Diminua / r5 

prosa cn pues ves. para, justificar a posição TOR Lamanho 
Eh vertertamenta correto vertical da rocha, Stante da janela, 


ligar mais de um fragmento de 
codigo aum evento. 


Q Pontos de Bala 


m A função setTimeout() permite criar um 
temporizador de disparo único que aciona 
o código JavaScript, após ter passado um 
período de tempo. 


m Para ajustar um temporizador que se repete 
em um certo intervalo, use setinterval() 
criando um temporizador de intervalo. 


=æ Especifique sempre a duração em 
milésimos de segundo, que é a milésima 
parte de um segundo. 
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OTD da imagem da rocha 
é usada para obter o 
elemento de imagem. 


N 


“N 


Os elementos de página da web tem 
um objeto style usado para definir as 
propriedades de estilo, como width e height. 


Ajanela do cliente faz parte da janela do 
navegador que exibe nada mais do que a 
página da web. 


Você pode acessar a largura e a altura da 
janela do cliente usando as propriedades 
body.clientWidth e body.clientHeight do 

objeto document. 


explorando o cliente 


O seu iRock... evolui! 


Com as alterações em seu código, o iRock evoluiu 
para se adaptar a cada ambiente único de navegação. 
Certifique-se de atualizar a sua iRock.html (disponível 
em www.altabooks.com.bi) para coincidir com a página 
104 e, em seguida, carregue-a em vários navegadores e 
diversos tamanhos de janela. Se quiser, tente também 
em seu reluzente iPhone! 


Agora, o +amanho da imagem — > 
da rocha varia de acordo com à 
+amanho da janela do navegador, 


Os usuários não vão mais informar problemas com seus» 


bichinhos de estimação e o Alan está pronto para lhe fornecer 
uma tonelada de opções de compra de ações. Todo mundo está 
feliz... por enquanto, 


Não existem 
perguntas idiotas 


P: Ainda não entendi a idéia dos 100 no cálculo do 
tamanho da imagem do iRock. Qual é a proposta? 


R: O código HTML/CSS da página do iRock posiciona a 
imagem da rocha 100 pixels abaixo da página. Portanto, ela não 
está comprimida contra a parte superior da janela do diente. O 
cálculo explica o posicionamento estético diminuindo a distância 
de 100 pixels antes de calcular a altura da rocha como uma 
porcentagem (90%) da altura da janela do cliente. Não há nada 
de mágico nos 100 pixels, isso só acontece para posicionar a 
rocha em um bom local na maior parte dos navegadores. 


P: Posso mudar o tamanho de qualquer coisa que eu 
queira usando as propriedades de estilo width e height 
do CSS? 


R: Praticamente. Felizmente, você está começando a ter 
uma pista do quão poderoso o JavaScript pode ser quando 
se trata de manipular o conteúdo de uma página da web. No 
caso do script do iRock, é a capacidade de consultar a janela 
do cliente para obter seu tamanho e, em seguida, usá-lo como 
base para alterar o tamanho de uma imagem. ý 


P: Por que não alterar o tamanho da imagem do iRock 
no código JavaScript no topo da página, em vez de usar 
o evento onload? 


R: Esse problema tem a ver com o conteúdo de página da 
web que não é carregado até o evento onload ser disparado. 
Seo seu código JavaScript acessa elementos na página, como 
o código do iRock. você não pode executar nenhum código 
anterior ao evento onload. 
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dimensionamento dinâmico 


O que acontece com o iRock quando o navegado: 
é redimensionado? A imagem da rocha não 
permanece do mesmo tamanho? 


Não, o tamanho da rocha não é dinâmico. 

Alguns usuários estão envolvidos no redimensionamento da janela 
de seus navegadores, e o iRock não mudará de tamanho quando 
isso acontecer. Esses usuários não serão pessoas satisfeitas. Isso 
porque o tamanho da imagem da rocha só é alterado quando a 
página carregar a primeira vez no evento onload. Daí em diante, 
nada do que acontece resulta no redimensionamento de uma 
imagem. Infelizmente, estamos de volta ao início: 


sas 


A imagem da rocha permanece do 
mesmo famanho suando a t janela do 
navegador for redimensionada. 
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explorando o cliente 


onresize é acionado quando o navegador é redimensionado 


Para que o tamanho da rocha mantenha seu tamanho proporcional à janela do cliente 
do navegador, o seu script precisa saber quando o usuário redimensionará a janela 
do navegador. Os redimensionamentos do navegador são comunicados usando-se 
um evento chamado onresize. O evento onresize é disparado sempre que a janela 

do navegador for redimensionada, e é justamente o que você precisa obter para 
redimensionar a imagem da rocha quando o tamanho da janela do navegador mudar. 


OOO Rock- The Vitu Pet Rok O E 


-que faz com que o código de 
manipulação do evento seja 
executado. 


~ <body onresize="doSomething () ;”> 


Gaa 


Para responder um evento onresize, atribua o código 
JavaScript ao atributo onresize da tag <body>. 


e seu lápis 


Uma dessas coisas não é parecida com a outra. Qual é... 
e por quê? 


onload onresize 
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solução inteligente 


Aponte seu lápis 
~N Solução 


Uma dessas coisas não é parecida com a outra. Qual é... 
e por quê? 


onload onresize 


O evento onresize redimensiona a rocha 


Agora é hora de obter a recompensa por criar uma função que redimensione a imagem da rocha. 
Para redimensionar a imagem da rocha em resposta ao redimensionamento da janela do navegador, 
você precisa chamar a função resizeRock() em resposta ao evento onresize: 


Pcionado quando a página é carregada Peisnado grando a t janela da 
pela primeira vez, navegador € redimensionada. 
pat 
N 
V 


<body onload="resizeRock(); greetUser () ;” onresize="res: 
2 A 

Ahiri Recs | \ ; 

função resizeRock \ ~ 5 

ainda É ade grondo Você pade chamar mais de ja sap resizeRocko 

a página é carregada pela um fragmemto de codigo ie Er cheia Co gealjue 

primeira vez para definir em resposta a um evento. a gue a janela da 

inicialmente o Famanho da MR Fornedimensianada, 


imagem da rocha, 


zeRock();"> 


O tamanho da imagem do iRock se ajusta automaticamente 
sempre que o usuário alterar o tamanho da janela do navegador. 


-© © © Mack - The Virtua Pet rock 


O evento onresize 
possibilita detecção e 
resposta às mudanças no 
tamanho da janela do == 
navegador. 
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000 Rock- The Virtual Perro — © 


Tenha cuidado 
ao redimensionar 
imagens no 


PRESTE. ATENÇÃO! JavaScript. 

a Isso é especialmente 
importante ao transformar imagens 
pequenas em grandes. Às vezes, 
a qualidade da imagem pode ficar 
comprometida. 


onresize! 


Done 


O JavaScript detecta uma 
mudança no cliente e então 
altera dinamicamente o 
conteúdo da página dewes em 
resposta à mudança. 


MOO Pesk The Viu Pet Rod ©. 


onresize! 


Querido, os clientes vão 
amar isso. Você tem mais 
alguma idéia legal? 


Alan está amando os usuários que agora percebem o 
que o iRock é imune às variações de tamanho do à 
navegador. O tamanho do iRock não só se ajusta 
inicialmente para caber na janela do cliente do 
navegador, como se ajusta dinamicamente caso o 
usuário redimensione o navegador. 
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amnésia temporária do navegador 


Já nos conhecemos? Como reconhecer o usuário 


Os problemas de tamanho do iRock agora é coisa do 
passado... mas e quanto aos usuários que clicam no iRock 
mais de uma vez para não se sintam sozinhos? E quando 
eles voltam para a rocha depois de reiniciar o computador? 


What is your name? 
y pa soa E 
O usuário se encontra 


pela primeira ves como 
rock e digita seu nome. 


Como você não se lembra 
de mim? Não causei uma 
boa impressão? 


O Rock responde com 
uma saudação pessoal — 
MRSceU uma amizade! 


ht is good to meet you, Paul. 


usa 


mo Rock não se lembra 
à 7 
mais do Usuario, 


Embora o iRock tenha realmente se encontrado 
com seu dono em algum momento no passado, de 
algum modo ele esqueceu o nome do usuário... 
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Todo script tem vida útil 


A perda de memória do iRock está relacionada à vida útil de um script, a 
qual afeta os dados armazenados em suas variáveis. 


o navegador é iniciado 
-a Página ainda precisa 
carregar e à usvânio 

pecisa digibar a VRL, 


irock.htm1 


A página é E carregada a partir do 
servidor web - HTML CS5, 
VavaScript e o resto, 


JavaScript destrói TODAS as 
variáveis quando o navegador é 
fechado ou a página é carregada 


onload! 


o script pára, o = 
UavaScrip+ limpa 
Hodas as, variaveis € 


O evento onload, 
é techada. 


dispara, as variáveis do 
VavaSeript são São criadas 
e inicializadas, 


a página e 


Le 


O usuario fecha 
o navegador as 
recarrega a pagina, 


Então, como você tentaria ajustar o código para resolver o 
problema do iRock esquecer o nome do usuário? 
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c de cookie 


Os cookies prolongam a vida útil do seu script 


O problema que tivemos com o iRock tem um nome, e ele se chama 
persistência. Ou, na verdade, é a falta de persistência. Às vezes, você 
precisa de dados que nunca desaparecem. Infelizmente, as variáveis 

do JavaScript são efêmeras e são destruídas no momento em que o 
navegador é fechado ou a página é atualizada. Os cookies do navegador 
oferecem uma maneira de armazenar dados de forma persistente 
fazendo com que ele dure além da vida útil de um script. 

Um Cookie é um fragmento de dados armazenados pelo navegador no 


computador do usuário. Os cookies são muito parecidos com as variáveis 


+ 2 
do JavaScript, exceto que eles permanecem após o fechamento do `N e 
navegador, o carregamento da página, o desligamento do computadora ~ A 
- N 
TE e 


reforma da sua casa etc. Isso faz com que os cookies sejam uma opção 
útil de armazenamento de nome de usuário no script do iRock. 


Quando o navegador é fechado, o 
7 


script grava a nome do usuario 
Ro em um cookie, 


Quando a N 
ne 2? 
Pagina € aberta 
novamente 
3 

2 cookie com 
é nome do 

li id 
usvario é lida a 
partin do disca 
rigido dele, 


N 
O navegador pe 
mantem uma coleção 
de cookies que 
foram criados por 
kag da 
diversas paginas 
web. 


2] navegador armazena 
/ NENE q a rpa com a nome do 
/ UM N ~ Usvânia em seu disco rigido 


e A 
Disco rigido para mante-lo a salvo, 
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Na primeira vez gue a usuária 
se encontra com o Rock, o 
nome dele € armazenado em uma 
variavel JavaScript. 


É bom usar uma variável JavaScript temporária 
enquanto o script está executando, mas você precisa 
armazená-la em um cookie de navegador caso 
queira que seu valor dure além de uma simples 
exibição de página da web. Inicialize a variável 
com o valor do cookie quando o script iniciar pela 
primeira vez e, em seguida, grave o valor da variável Term ne! 
de volta ao cookie quando o script terminar. cid 
GOO Rock -The Virtual Pet Rock — © 


Uavascript Application] 
It is good to meet yov, Ba 


jo é armazenado 
fazendo com pye 
ida pela rocha. 


1 
O nome do usuar 
em uma variavel, 
a ser exib 


N 


ela pos Si 


= “Bei” 
~x 


onte seu lápis 


Escreva algum outro tipo de dados de página da web que você 
poderia armazenar de forma persistente usando cookies. 
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o confronto: variável e cookie 


Conversa informal 
Conversa desta noite: Variável e cookie 


examinam a importância do armazenamento de 
dados persistentess. 


Variável Cookie 


Eu não entendo porque estamos conversando — 

você não tem nada a ver com JavaScript. 
Bem, você está quase certa. Eu realmente faço o 
que tenho a fazer sem a ajuda do JavaScript, mas 
também ainda tenho uma conexão importante 
com ele. Ofereço a maneira de armazenar 
dados de forma persistente. E, como você 
provavelmente já descobriu, o JavaScript não é 
bom em persistência. 

Entendo para onde você está direcionado. Você 

acha que de algum modo eu sou uma opção 

inferior de armazenamento de dados, porque sou 

atacado toda vez que o navegador é fechado ou e 

a página é recarregada. Ainda assim, sou muito 

acessível... ao contrário de algumas pessoas. 
Inacessível? Estou sempre lá no navegador, 
pronto para ser chamado a qualquer momento. 

Pode ser, mas você não vive em quartos apertados 

no meio de uma porção de outros cookies? 
Sim... e? 

Bem, se os rumores são verdadeiros, dá muito 

trabalho procurar um simples cookie... vocês 

todos estão armazenados em uma grande lista. 

Que sofrimento! É o que me refiro a inacessível. 
Bem, sim, nós cookies somos armazenados 
em uma grande lista, mas temos nomes únicos, 
Não é assim tão difícil chegar até nós. Você só 
precisa saber como separar a lista para achar um 
determinado nome. 


Escreva algum outro tipo de dados de página da web que 
você poderia armazenar de forma persistente usando 


Aponte seu lápis 
a Solução 
cookies. 


T) do usuário, combeúdo de carrinho de compras, localização geografica, idioma 
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Variável 


Certo, mas esse é o problema. Não há listas ou 
qualquer coisa envolvida no meu acesso. Apenas 
chame meu nome... e eu estarei lá!! 


Permanência é ótimo, mas isso não resolve os 
problemas do dia-a-dia. Se você pensar bem, nem 
todos aqueles dados precisam durar para sempre. 
Na verdade, é mais eficiente armazenar dados 
temporariamente e deixá-los ir embora ao terminar 
de usá-los. É onde eu entro. Eu sou a principal mídia 
de armazenamento temporário para dados de script. 


Interessante, mas, para começar, como você acha 
que esses itens foram adicionados ao carrinho de 
compras? A maioria dos carrinhos de compras 
conta comigo para armazenar dados temporários 
ao longo das compras. Sou importante... talvez até 
mais importante. Mesmo que eu tenha tendência 
a esquecer coisas com um pouco mais de rapidez. 


Acho que você está certo. Solucionamos 
problemas diferentes e nunca deveríamos competir. 
Embora eu tenha que admitir que ainda prefiro 

a minha facilidade de acesso à sua capacidade de 
armazenar coisas de forma persistente. 


Que conversa? 


explorando o cliente 


Você não precisa cantar. Eu entendi. Mas a 
verdadeira questão é que quando você armazena 
alguma coisa em mim, eu sempre me lembro. 
Não importa se o navegador estiver fechado ou 
se a página for carregada. Sou permanente... a 
menos que o usuário opte por limpar todos os 
cookies. Mas isso é uma outra questão. 


Que seja... acho que você está subestimando 

a importância do armazenamento de dados 
permanentes. Você nunca se impressionou com a 
magia de retornar a um carrinho de compras dias 
depois de navegar, só para descobrir que tudo ainda 
está lá? Esse é o tipo de mágica que torno realidade! 


Isso está começando a parecer como se 
pudéssemos nos complementar. Eu sempre lhe 
vi como uma inimiga. 


Você não poderia deixar de dar uma alfinctada, 
não é? Vou me embora e descansarci trangúilo, 
sabendo que tão logo essa página seja virada, 
você se esquecerá de toda essa conversa. 

Não disse? 
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armazenamento de cookie do cliente 


Por que você não armazena dados 
persistentes da web no servidor? 


Você não precisa do servidor para pequenos 
fragmentos de informação, como um nome de 
usuário. 


Ah, o servidor. Sim, o servidor é uma opção viável 
para armazenar dados de forma persistente, mas 
pode ser exagerado para pequenos fragmentos de 
informação. Armazenar dados no servidor requer 
trabalho de programação, junto com uma mídia 

de armazenamento, como um banco de dados. 
Programação de servidor e armazenamento de 
banco de dados é muita coisa para armazenar um 
fragmento de dados que você deseja persistir para 
um simples script de cliente, como o nome de 
usuário no script do iRock. 

Cookies permitem armazenar dados de forma 
persistente no cliente sem envolver o servidor. Não 
só isso, mas os usuários possuem a capacidade de ` 
limpar os dados dos cookies no navegador, se ele 
quiser se ver livre das informações que as páginas 
da web armazenaram de forma persistente. Isso não 
é possível com os dados armazenados no servidor. 


Prático 
armazenamento de 


dados persistentes 
JavaSexipt Cookie no cliente! 
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Os cookies têm um nome e 
armazenam um valor... e podem 7 - 
| O nome Unico do cookie, 


expirar y ilr 


O valor armazenado 


/ Nome Žž - 


Um cookie armazena um simples fragmento de e 


K 
dados sob um único nome, como uma variável userName = Paul s 
Ao contrário de uma variável, contudo, um Expira em 9/3/2009 “º cookie. 
cookie pode ter uma data de validade, Quando h 
essa data chega, o cookie é destruído. Então, na 
realidade os cookies não são verdadeiramente 
permanentes, eles só vivem mais do que as 
variáveis. Você pode criar um cookie sem 
uma data de validade, mas ele agirá como uma 
variável JavaScript — ele será apagado quando o 
navegador for fechado. 
Os cookies são armazenados no computador 
de um usuário como uma longa string de 
texto associada ao site da web (ou domínio). 
Cada cookie é separado um do outro por um 
ponto-e-vírgula (;). Ponto-e-vírgula é a chave 
para a leitura da lista de cookies e extração de 
um único cookie. 


“Data de validade 
A data em que o cookie 
expira... e morre, 


ata de validade 


inir a di itemi = Televisão 
pr cookie em um futuro de tela plana 
de torna mais cartID = 1103 lang = fr ca Expira em 
remoto o > S gi em 4/11/2008 Expira em 25/6/2010 3/9/2008 


permanente. 
a Ka 


a Ee 
2 8 
BIÉ 
9º + alol š . 
so Ss x Como todos os cookies estão armazenados no mesmo 
a lugar, extrair um cookie específico exige um certo 


trabalho, mas há uma receita que você pode seguir que 
faz com que a leitura, gravação e remoção de cookies 


sejam menos desencorajadoras... 
readCookie () 
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uriteCookie () 


assando cookies com JavaScript 


Javascript = o E para três funções auxiliares de cookie que permite 

pranto pará ph var, er e eoi cookies com facilidade. Às vezes, a abordagem 

des ais inteligente é velejar no trabalho dos outros. Pegue essa receita 
(disponível para download em btp:/ / aum headfirstlabscom/ books/bfs/) 
e aproveite ao máximo as funções dos cookies feitos em casa. 


Todo vem se voce não entende nada 
momi nto em que a ste livra ; AC valida 
eee L 
h , ce, lade 
; i 0 de dias 
€ existia 


function writecookie (name, value, days) ( 
hor padrão, não há expiração. Então, o cookie é temporário 


var expires = *”; 


4 Especificar um número de dias torna o cookie persistente Éssa data de 
if (days) 1 deitar 
var date = new Date (): validade è calevlada ao 


date. setTime (date .getTime() + (days * 24 * 60 * 60 * 1900)) ; 
expires = "; expires=" + date.toGMiString(); 
F 


converten a número 
de dias em milésimas 
de Segundo e, em 
Seguida, adicionar 
ESSE numero ao 


momento abval. 


44 atribua nome, valor e data de validade ao cookie 
document.cookie = name + “=” + value + expires +~: path=/"; 


, 


function readCookie (name) ( 
7/ Busque o cookie especificado e retorne seu valor 
var searchName = name + "="; 
var cookies = document.cookie.split(':") 


fer (var i=0: i < cookies.length; i++) | Sh - 
var c = cookies[il: 
while (c.charat (0) == * *) e 
c = c.substring(l, c.length); A lista de 


if (c.indexof (searchName) == 0) 


7 
cookie rvídia 
coturn e. substring (searchName. length, c.length); es € dividida 


em cookies 
individuais 


, 
return null; 


1 
separados por 


pomto-e-virgula, 


function eraseCookie (name) ( 
// apague o cookie especificado 
writeCockie (name, “”, -1); 


, 


Você exclui um coskie 
Sravando-o sem silas 
valor e sem data de 
validade expirada (-/ dia), 


Os arquivos que 

sê contem codigo 

+ Vavaseript 

s ~ 
normalmente são 

R nomeados com uma 


extensão de argui 


Crie um arquivo 
vazio, momei-o cookie. 
Je e edicione este 
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Seu JavaScript pode residir FORA de sua página da web . 


Quando o código RA SE Esta Lembre-se de encerrar 
arquivo, você precisa importá-lo para qualquer página da web na pi P ais 

qual planeje usar o código. Então, no caso das funções de cookie nd Sia f serp Ee - 
em cookie.js, você precisará importá-los para a sua página iRock. 

html. Isso é feito com uma variação da tag <script>: / 


“text/javascript” src="cookie. js”></script> 


RI 


<script type 


I +é o pa 
4 ip P 
o po do chade ser Eme dera gre cu 
sempre Hextoljavaserip pi = o de script nonmalme, E 
riaye Javascript. PARA cam js, 
FACA ASSIM! Faça essa Quando você importa um código de script externo para 
adição à sua página Rock, a página, todo o código JavaScript no arquivo de script é 
a Je certifique-se de que inserido dentro da tag <script> no código HTML, como 
ii eo fz is es E Ha se você tivesse colocado o código diretamente na página 
sarp” r> P J da web. Sempre que tiver um código que possa ser usado 
mesmo direrorio. em mais de uma página, é uma boa idéia colocá-lo em um 


arquivo externo e importar o arquivo para as páginas. 


<html> 
<head> 
“title>iRock - The virtual Pet Re 


Ypi 
var userName; 


ext/javascript”> 


O códizo 


function resizeRock( de seript 
document. getEl, el P 
-JetElementById (“rock ja fado” 
cume Img”). imparta 
o umant body c1ienchera nor) Style.height isa do 
1 + 0.9; € calacado 
7 
function greetUser() i na pagina A 
guando ela e 


recarresada, 


Escreva por que motivo é uma boa idéia organizar código reutilizável em 
um arquivo externo. 


N 
Exercicio 
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papagaio quer biscoito? 


Escreva por que motivo é uma boa idéia organizar código reutilizável em 
um arquivo externo. 
Solução do 
Exercício 


Cumprimente o usuário com um cookie 


Precisamos de uma versão movida a cookie do userName = Paul 
script do iRock que possa cumprimentar o usuário Expira em 9/3/2009 
com uma saudação pessoal, supondo que seu nome 

já tenha sido armazenado em um cookie. Caso 

não tenha sido, pode-se recorrer a uma saudação 

genérica e impessoal. Existem dois benefícios! 


EA 4 
Variavel Leia o nome de usuario de 
UavaSeripk, um cookie € armagene-o em 

X 7 
S uma variavel, 


N 
userName = : 


, 
É o nome de usvário,.. 
ou nada! 


Existe um nome de usuário? 


Sim! Não 


/ 
Pessoal Generico 
EN £ 
it is good to meet you, Paul. Hello, | am your pet rock. 


= 
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O código 

do Rock precisa de um 

À função greetuserO é responsavel Pula deserit Epi 
pela saudação do usuario guando a geen não haja egvivoco, caso 


pagina é carregada pela primeira vez, você, precise adicionar mais 
cookies ao seript, 


Não é uma 
i adição. € 
function greetUser() ( concatenação 
ar Pena: = readCookie (“irock ass ename l; de string! 


alert (“Olá “ + userName + “, senti sua falta.”); 


else A 
alert (*Olá, eu sou sua rocha de estimaç 


| 

| 
$ F A \ 
o nome da usuario é Na | 


/ 
lido a partin do cookie e ‘$ Se o name de um usuario 


/ if (userName) - 


PR ir ma variavel y , AE aa 

pe D nome do usuário esta vaia, ha ém ie, recusa 
aque significa que é cookie não saudação pessoal. 
RA egve Jenss que escolher 


uma saudação genérica, 


greetUser() agora é acionado pelo cookie 


O que realmente está acontecendo na função greetUser() é um dueto de dados 
interpretado por uma variável e um cookie. O nome do usuário é lido a partir 
do cookie e armazenado na variável. Mas você não pode contar que o cookie 
mantenha um nome... e se essa for a primeira vez que o script é executado e o 
usuário nunca tivesse digitado um nome? Eis o porquê de o código verificar se a 
variável realmente recebeu um nome do cookie — este é o teste que determina se 
a saudação é pessoal ou genérica. 
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sensível, sensível 


Lembre-se de definir o cookie também E 


Ler o cookie do iRock é muito bom, mas você ainda tem que definir o cookie antes 
de qualquer coisa. A gravação do cookie deve ocorrer na função touchRock(), que 
é chamada quando o usuário clica na imagem da rocha. A função touchRock() 
imediamente avisa o usuário para digitar um nome — agora ela precisa gravar esse 
nome em um cookie, após ele ser digitado. 


O estilo do código 
de perto 


Se não houver um nome 
de usuario, precisamos 
abte-lo do usuário, 


i ais Epio Harke Se houver um nome de y 
Primeiro, é ário, usuario, agradeça-o | 
Lá um nome de vs 3 | 

veja se pessoalmente pela atenção. | 


X 


fungtion touchRock() { F} j 
if (userName) { 4 
alert (“Eu gosto de atenção, “ + userName + “. | Obrighaa. t); 
$ Confira para certificar-se de que o usuário | 
else { Ide fato dig tou um nome. 
userName = prgmpt ("Qual é o seu nome?”, “Digite seu nome 
aqui.”); A 
if (us&fName) { 
alert (“Que bom conhecer você, “ + userName + “.”); 
writeCookie (“irock username”, userName, 5 * 365); 


} 


i 4 i h e i 
document . gi tElementById (“rockImg") „src |= “rock _happy.png”? 
setTimeout (“document. dO racking” Ses: à ri 
png! ;”, / | ) À 
5 * 60 /* 1000); a, 
j j J O valor, m nome tenta $ 


Cookie do nome 


í 4 ef de vsvario € 

SSE EO mesmo nome i da vsvario por 

Existe um nome, de cookie usado para A epi ado, à cá A” Proximadamente 

emtão cumprimente ler a aukio; Cashier o ME MPEMANÔME O, oi Ti 

o usuario e, em não usam camelCase, 

seguida, grave o eles são prod parecidos É ssa função e é chamada guando 

nome em um cookie. com Ds HTL. a imagem da rocha for clicada, 
T 


<img id="rockImg” src="rock.png” onclick="touchRock ();” /> 
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Sob vários aspectos, a função touchRock() 
interpreta um papel contrário como a função 
greerUser(), pelo menos e termos de cookies. 
O nome do usuário é digitado pelo usuário, 
armazenado em uma variável e, em seguida, 
gravado em um cookie. 


Vlike the attention, Paul. Thank you- 


Irmagena as informações 
7 7 
do usuario em uma variavel, 


userName = : “Paul 


" 


4 
Ç Grava a variavel 


em um cookie, 


Legal! Agora a minha 
rocha de estimação se 
lembra de mim. 


Aitera o 


Rock para uma 


it is good to meet you, Paul. 


(E 


imagem feli 
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não toque no pote de biscoitos 


Os cookies afetam a segurança do navegador 


Embora a maioria dos usuários do iRock estejam 


a ki Só porque você pode, 
impressionados com os cookies como a cura para à não significa que você: 
perda de memória, alguns questionam seus riscos de deve. 


segurança. Essa é uma excelente questão, já que em 
muitos casos os dados pessoais ficam armazenados 

nos cookies. Mas a realidade é que os cookies não 
representam um risco à segurança... pelo menos não 
em termos de acesso a dados confidenciais que estejam 
armazenados em seu computador. No entanto, os cookies 
não são considerados seguros para armazenamento, 
portanto não é uma boa idéia armazenar dados 
confidenciais em um cookie. 


Agp Embora você possa 
* armazenar qualquer 
coisa em um cookie, 
eles não são incrivelmente seguros 
em termos de como armazenam 
dados. Então, não é uma boa idéia 
armazenar dados confidenciais em 
um cookie. 


PRESTE A) 


Um cookie é apenas um 
fragmento de dados de texto 
armazenados em um arquivo 
em seu computador. 


Interrompemos essa transmissão 
para trazer uma mensagem sobre a 
segurança do JavaScript... 


Os cookies podem armazenar 

Como os cookies não são dados pessoais, mas somente 

Embora os cookies programas executáveis, quando os usuários digitarem 
normalmente sejam eles não conseguem dados intencionalmente em 


armazenados em um disseminar vírus ou worms. uma página da web. 
disco rígido, eles 


não podem tocar em 
mais nada. 
dog 8 
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Não existem 


perguntas idiotas ———— 


7 Os cookies são sem; sempre armazenados no 
isco rígido do usuário? 

+ Não. Mas o disco rígido é onde a grande 
maioria dos navegadores armazena cookies. Nem 
todo navegador tem acesso a um disco rígido. 
Por exemplo, alguns dispositivos móveis usam 
memória especial, em vez de discos rígidos para 
armazenamento de dados persistentes. Neste 
caso, o navegador usa a memória persistente 
para armazenar cookies. Mesmo assim, do ponto 
de vista do navegador (e seus scripts), os cookies 
lembram de seus valores independentemente de 
como eles são armazenados nos bastidores. 
Como sei se o meu nome de cookie é único? 


Nomes de cookies só precisam ser únicos 
dentro de uma determinada página da web, 
porque os cookies são armazenados de acordo 
com a página que os criaram, inclusive o site 
web da página. Isso significa que a página faz 
parte efetivamente do nome do cookie, pelo 
menos em termos de singularidade. Conclusão: 
certifique-se de que seus cookies são únicos 
dentro de uma determinada página ou site. 

P: Os dados dos cookies são compartilhados 
entre navegadores diferentes? 


1 Não. Cada navegador mantém seu próprio 
banco de dados de cookies, Portanto, o conjunto 
de cookies no Internet Explorer não estará 
visível para o Firefox ou o Opera. 

* Se os cookies são tão úteis, por que eu 
armazenaria dados no servidor? 

+ Primeiramente, os cookies só servem 
para armazenar blocos de texto relativamente 
pequenos (menos de 4 Kb). Essa é uma 
das limitações importantes dos 
cookies. Ainda mais importante 


é o fato de que cookies E 


eficientes, o que significa que você não precisaria 
ler e gravar constantemente milhares de dados 
neles. É aí que um verdadeiro banco de dados 
entra em cena, e bancos de dados normalmente 
residem no servidor. Então, embora os cookies 
sejam ótimos para armazenar pequenos 
fragmentos de dados que não precisam 
necessariamente de armazenamento no servidor 
em um banco de dados, eles não são uma 
solução para todas as necessidades de seus dados 
da web. E eles também não são exatamente 
ideais para armazenar dados confidenciais, já que 
foram criados sem a preocupação da segurança. 
: Existe alguma forma de criar cookies 
verdadeiramente permanentes? 

Não. Goste ou não, cada cookie possui uma 
data de validade. A idéia por detrás de um cookie 
não é tanto a de um verdadeiro armazenamento 
de dados em longo prazo, tanto quanto ele é 
um meio de preservar dados em médio prazo. 
Em outras palavras, os cookies são ótimos para 
armazenar dados durante dias, semanas e meses. 
Se você estiver lidando com dados que precisam 
sobreviver por longos períodos de tempo, talvez 
precise armazená-los no servidor. Não é ue 
um cookie não possa armazenar dados durante 
anos, é que é improvável que o usuário não vá 
fazer um upgrade no computador, reinstalar o 
navegador ou remover dados de cookies. 


1 Chega de cookies... existe al; 

svantagem em armazenar código 

avaScript em um arquivo externo? 

* Não, exatamente. No entanto, lembre-se de 
que o objetivo do código externo é facilitar o 
compartilhamento e manter o código quando 
ele precisa ser usado em mais de uma página da 
web. Se você estiver lidando com um código que 
só aparece em uma única página, realmente não 
se beneficiará muito movendo-o para um arquivo 
externo. Ou seja, a não ser que a página esteja 
particularmente desarrumada e você precise 
separar o código para sua própria saúde mental. 


não são particularmente 
Q Pontos de Bala 


* Um cookie é um fragmento de dados de texto 
armazenados pelo navegador no computador 
do usuário. 


* Mover o código de script para um arquivo 
externo é uma maneira útil de tornar o código 
mais reutilizável e de fácil manutenção. 


* Os cookies permitem que scripts armazenem 
dados que sobrevivem além de uma simples 
sessão da web. Todo cookie possui uma data 
de validade e, depois de expirada, o cookie é 
destruído pelo navegador. 


* Cookies não conseguem acessar o disco 
rígido de um usuário ou disseminar virus. 
mas eles são capazes de armazenar dados 
pessoais digitados em páginas da web. 
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nenhum cookie para você 


Um mundo sem cookies 


Seja a preocupação com segurança ou navegadores 
limitados, poucos usuários do iRock não são capazes de se 
beneficiar do iRock movido a cookie, porque os cookies 
não estão disponíveis em seus navegadores. Isso apresenta 
um grande problema, porque o script do iRock parte 

do princípio de que todos possuem suporte a cookies. 

O iRock depende dos cookies para memorizar, mas é 
inaceitável não deixar ao menos os usuários de poucos 
cookies saberem o que eles estão perdendo em relação à 
experiência total do iRock. 


, + é» = Problemão! 


JavaScript Cookie partido 


Tada usuário que vai 
embora é menos um 
liente... isso é inaceitável 


A boa notícia é que o navegador possui uma propriedade booleana com 
a qual você pode verificar se os cookies estão disponíveis. A propriedade 
cookieEnabled faz parte do objeto navigator, que fornece informações 
ao JavaScript sobre o navegador. 


navigator.cookieEnabled 


Se as cookies 


estiverem ~ 
e 
disponiveis, a Se es cosbies mveis você 
vida é bela estiverem dispor op, 
. verdadeiro falso ~ los ou gr% 
não pode 


"O 
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Aponte seu lápis 


Escreva o código que falta para verificar o suporte 
a cookies nas nado greetUser() e touchRock(). 
Além disso, adicione o código que falta em 
touchRock() para permitir que o usuário saiba que 
os cookies não estão disponíveis. 


function greerUser() ( 


userName 
if (userName) 

alert (“Olá “ + userName + “ 
else 


readCookie (“irock username”) ; 


, senti sua falta.”); 


alert (*Olá, eu sou sua rocha de estimação.'); 


function touchRock() ( 
if (userName) ( 


alert (“Eu gosto de atenção, “ + userName + “, Obrigada.”); 


} 
else { 


userName = prompt (“Qual é o seu nome?”, “Digite seu nome aqui.”); 
1f (userName) ( 


alert (“Que bom conhecer você, “ + userName + “.”); 


writeCookie (“irock username + userName, 5 * 365); 
else 


document .getElementById (“rockImg”) .src = “rock happy.png”; 


setTimeout (“document . getElementById (*rockImg') .src = *rock.png';”, 
3 * 60 * 1000); 


você está aqui» 427 


solução inteligente 


Aponte seu lápis $ 
~ Solução Escreva o código que falta para verificar o suporte 


a cookies nas funções greetUser() e touchRock(). 
Além disso, adicione o código que falta em 
touchRock() para permitir que o usuário saiba que 
os cookies não estão disponíveis. 


Se o suporte a cookie esta disponivel, leia o 


nome de usuario a partir do cookie do iRock, 
| 


userName 
if (userName) 


alert (“Olá “ + userName + “, senti sua falta.”); 
else 


readcookie Cirock - username”) ; 


alert (“Olá, eu sou sua rocha de estimação.'); 


f 


function touchRock() { 
if (userName) ( 
alert (“Eu gosto de atenção, “ + userName + “, Obrigada. ”); 


} ` 
else | 


userName = prompt (“Qual é o seu nome?”, “Digite seu nome aqui.” 
if (userName) ( 


alert (“Que bom conhecer você, “ + userName + “.”); Se os cos pés 
são suportados, 

“grave o nome de 

usvaria do cookie. 


navigator. cootieimabled) ae 


writeCookie (“irock username”, ndNano, 5 * 365); 
else 


} remember ao later, E N 


) 
document. getElementByTd (rock tag”) «src = “rock happy.png”; 
setTimeout (“document . datELEnEdtEIA rockImg') .src *rock. pogre” 
5a * 
5 * 60 * 1000); No Lmtorme ao usuária gue a ausência de 


suporte a cookies limikara o Rack. 


A a com pue as fun 
— página Rock befnl 


aparência. em segui 


Ses de sua 
dam essa 


ida, faça o teste. 
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Não existem . 
perguntas idiotas 


P: Você pode verificar o suporte a cookie de cliente com base no tipo ou na versão 
do navegador? | 


R: Adetecção é uma ladeira escorregadia de script que, em última análise, leva a resultados 
duvidosos. Você não pode realmente confiar que os navegadores falem sobre eles mesmos 
quando se trata de informação de versão, o que toma a propriedade navigator.cookieEnabled 
a única maneira verdadeiramente confiável de verificar o suporte a cookie. 


Fale com os usuários... é melhor do que nada 


Embora não haja uma boa maneira de simular cookies quando eles não 
estão disponíveis, suspender as más notícias ao usuário vale muito em 
termos da satisfação dele. 


eoo Mack - The Virtual Pet Rock o 


Querido! Essa é uma forma. 

graciosa de lidar com os 
navegadores de poucos 
cookies. 


Cookies aren't supported enabled in your browser, which 
means | won't remember you later. l'm sorry. 


A 
( 


O Brian esta telis, à 
novamente. € você 
pecebeu um outro 
salário bom. 


Existem Coisas piores do 
EX 

en fonesto Sobre a que 
Usuario esta Perdendo 


se 
a 
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rolando com o iRock 2.0 


Um iRock digno do rei JavaScript 


Você desgastou muito os sapatos do seu 
JavaScript passeando por todo o código 
necessário para fazer do iRock um sucesso. 
Mas com uma pequena ajuda do cliente, o 
iRock agora está emocionalmente mais real, 
perdeu suas inconsistências de tamanho e 


melhorou sua memória! 


Graças a todo o seu 
empenho, o iRock agora é 
uma rocha de estimação 
sólida. 
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Cruzadas do JavaScript 


Dedique um tempo para relaxar e dar ao lado 
direito do seu cérebro algo para fazer. São suas 
clássicas palavras cruzadas; todas as palavras da 
solução encontram-se neste capítulo. 


Horizontal 


5. A milésima parte de um segundo. 

7. Eu sou responsável pelo gerenciamento da 
lista de cookies. 

8. Um mecanismo JavaScript que permite 
executar um código, depois de transcorrido um 
certo período de tempo. 

10. Um cookie possui um nome, um valor e uma 


11. Use um desses para armazenar um 
fragmento de informação no cliente que você 
pode precisar mais tarde. 

12. O que você faz ao consultar o código 
JavaScript externo de uma página da Web. 


Vertical 


1. Esse tipo de temporizador executa um 
fragmento de código repetidamente. 

2. Essa função permite criar um temporizador 
de disparo único. 

3. Quando os dados permanecem após um script 
terminar a execução, é considerado ... 
4. Quando a janela do navegador é 
redimensionada, o evento........ é acionado. 

6. Um outro nome para um navegador Web. 

9. Os cookies não são capazes de disseminá-los. 
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solução das Cruzadas do JavaScript 


Solução das Cruzadas do JavaScript 


'P 
E 
R 

s| 

[| 

s| 


L 
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explorando o cliente 


RR oiro coon o TT 


Dobre a página na vertical Por qe o JavaScript 


para alinhar os dois cérebros se preocupa com o 
e resolver a charada. E 9 
clientes 


/ 
É um encontro 
E) S de mentes! < 


O cliente é onde o código JavaScript é 
executado, o que significa que o 
JavaScript reside no navegador. 
Ísso é muito positivo, porgue significa 
que o servidor 
tem menos com o que se preocupar, 
como, por exemplo, armazenar cookies! 
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4 tomada de decisão j 


* * 
Se houver uma bifurcação na 


estrada, pegue-a 


Quem consegue resistir a um 
homem fardado?... mas quem eu 
devo escolher? 


A vida é uma tomada de decisões. Parar ou seguir, dispensar ou guardar, declarar- 

se culpado ou ir a julgamento... sem habilidade para tomar decisões nada seria feito. Funciona da 
mesma maneira no JavaScript — as decisões permitem que os scripts escolham entre diferentes 
possibilidades de resultado. A tomada de decisão conduz a “história” de seus scripts, e até 
mesmo os scripts mais rotineiros envolvem algum tipo de história. Você confia no que o usuário digitou 
e faz reserva em uma viagem de expedição Sasquatch’ para ele? Ou verifica se ele só quer pegar um 
ônibus para Saskatchewan?? A escolha é sua! 


me escolhe, me escolhe 


Concorrente sortudo, venha até aqui! ; 


No episódio de hoje do emocionante concurso Quer fazer uma aposta? um concorrente está prestes a 
ser escolhido... 


Senhoras e senhores, 
o nosso concorrente 
sortudo é... Eric! 


y 
3 


frio 


concorrente 


Apresentador sortudo, 


do programa 


Embora não haja dúvida de que você esteja 
sentindo um certo suspense na expectativa do 
talento de Eric em tomar decisões, a verdadeira 
pergunta é: que conhecimento tem o apresentador 
para anunciar Eric como um concorrente sortudo? 


136 Capítulo 4 


tomada de decisão 


Escolhas têm tudo a ver com tomar decisões. 


Då, está escrito lá no cartão dele! Exato, mas parta do pressuposto que o apresentador pode 
tomar decisões com base no nome que aparece no cartão. É porque ele é humano, e as pessoas se 
esmeram em processar informações e tomar decisões. Se o apresentador fosse um script, as coisas 


não seriam assim tão fáceis. 


O nome no cartão 
resulta na decisão de 
escolher o Éric, 


A pergunta é a seguinte: como um script usa um fragmento de informação como base para tomar 
uma medida? Conhecer o nome que aparece em um determinado cartão é apenas a metade da 
resposta. A outra metade envolve a capacidade de avaliar o nome no cartão e, em seguida, escolher 
o concorrente com o mesmo nome, neste caso o E; 
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se uma decisão for necessária 


"se" isso for verdadeiro... então faça algo 


JavaScript é, na verdade, muito competente em processar informações e tomar decisões, e uma 
das maneiras disso acontecer é com a instrução if. A instrução if permite que você tome decisões 
simples, executando condicionalmente um fragmento de código JavaScript baseado em um teste 
true/false. 


se (teste true/ , 


false) Faça algo; 


Se você der uma olhada no exemplo do show de perguntas através das lentes de uma instrução 
JavaScript if, você terá um código assim: 


Contere se as duas 
coisas são iguais, 


if (chosenContestant == “Eric”) 
alert (“Eric, venha até aqui!” 


e Nenhum pomo-e-vingula , 
7 ii 
ja que este não e de fato 


O teste +rvel: false é 
sempre colocado entre fisse é o fim da o fim da instrução if, 
parênteses. imstrução H. 


Eric, come on down! 


À instrução if é uma maneira excelente de 
executar condicionalmente um fragmento de 
código. 
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Uma instrução if avalia uma condição... e então, age 


Toda instrução if adere ao mesmo formato. Você 

usava este formato quando adicionava cookies ao £ P 

iRock, mas eis a decomposição: se codiso TÊM QUÊ, YA 
v farma, avaliar true E e 


(ia “ci 


Existem algumas coisas a serem lembradas sobre o formato da 


Indemte para facilitar a instrução if. Primeiro, você só pode executar um fragmento de 
teria dá ta digo. código, e ele deve aparecer indentado acima de if e do teste de 


s a condição. Embora niojsagowsanenté exigido; é uma boa 
A instr vp indembada fag: idei indentar ésse código pára que você possa ver rapidamente 
parte de if. que faz parte de sua instrução if. Eis os passos exigidos para 
levar a cabo uma decisão com uma instrução i f; 


(1) Coloque o teste de condição true/false entre parênteses. 
O indente alguns espaços na próxima linha do código. 


O Escreva o código que é executado se o teste de condição 
for true. 


Una as instruções if às ações que devem acompanhá-las. 


3 
Exercicio 


(hungry) numDonuts *= 12; 


(countDown == 0) userName = readCookie (“irock username”); 


(donutString. indexof (“dozen”) awardPrize(); 
f (testScore > 90) goEat (): 
(guilty) alert (“Houston, nós decolamos.”); 


(winner) alert (“Ela é inocente!”); 


(navigator.cookieEnabled) grade = 
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solução do exercício 


Una as instruções if às ações que devem acompanháas. 


y 
Solução do +rve se a string combém 
Exercício a palavra dozen 
if (hungry) numDonuts *= 12; 
if (countDown == 0) userName = readCcokie(“irock username”) ; 
if (donutString. indexof (“dozen”) awardPrize(); 


if 


griit n portanto guitty 


deve ser false, 


vit significa NOT 


(testScore > 90) goEat (); 


(guilty) alert (*Houston, nós decolamos.”); 


(winner) alert (“Ela é inocente!”); 


(navigator.cookieEnabled) grade = “A”; 


A rue se os cookies do navegador 
estiverem habilitados 


Mas que droga! O que 
devo fazer SE existir 
mais de uma opção? 


Faça isso... ou então. 

Logo agora que você pensava que o JavaScript tinha abordado 
tudo, aparece algo fora do comum. Na verdade, escolher 

entre mais de um resultado não é tão fora do comum assim... 
chocolate ou baunilha, descafeinado ou normal, parece que 
muitas opções envolvem uma coisa 04 outra. Eis porque a 
instrução if pode ser ajustada para permitir uma tomada de 
decisão e, em seguida, agir de uma ou duas maneiras possíveis... 
ou, às vezes, até mais do que isso, 
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Uma guinada na instrução if permite que você escolha entre 
as duas possibilidades de resultado. De volta ao Quer fazer uma aposta?, 
Eric está lutando para tomar uma decisão como essa. Apresentado as 
duas alternativas, ele tem que escolher uma das duas. 


O Caso À € a primeira 
opção de Erien 


if (teste true/false) ET A 
Faça algo; Segunda opção, 
else 


Faça algo diferente; 


Raramente, a vida é tão simples quanto escolher apenas uma coisa. 


A instrução à £ nos dá (e ao Eric) a capacidade de escolher o Caso À 
ou o Caso B, Mas como fica isso no JavaScript? 


if (chosenCase == “A”) 
openCase (“A”) ; 


9 7 Como dizer © 


. t agora e 
hosentase 
a. ve faser “A? 
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se houver mais de uma opção 


Você pode tomar ÉfBS ões com if À 


Usar uma instrução if para tomar uma medida significa transformá-la em uma instrução if / 
else, o que lhe dará a opção de executar um fragmento de código diferente se o teste true/false 
falhar. É como dizer: se o teste for verdadeiro, execute o primeiro fragmento de código; e se não 
(então), execute um outro fragmento de código. 


if (chosenCase == “A”) 


opencase (“A”); <a A instrução if else consiste em 
vas hit 
else a Ra Sibilidades de resultados 
ra cada possibilia J 
openCase (“B”) ; do Feste dec a ER Yelin 


False endião, 


Eric escolheu o Caso B, o que significa que a variável chosenCase seja “B”. 
Portanto, como o primeiro teste de condição é falso, isso disparará a instrução 
if/else para executar o código else. Para Eric, infelizmente, o Caso B 
contém donuts, e não a pilha de dinheiro que ele estava esperando. 


Caso Ê 


Ei, posso mudar 
minha decisão? 
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Como adicionar else à sua instrução if 3 


A formatação de uma instrução if/else é muito 


semelhante à instrução if. Associe else à palavra- 
chave de forma a executar junto com o outro 
fragmento de código, se o teste de condição for 
falso: 


ER | da É SEE 4 E “a 
Se for ns esse 


À palavra-chave else 
adiciona uma aura 
segt ência de ações 
paraa instrução i. 


: 


ihi io é é executado. 


ao 


Para adicionar uma segunda sequência de ações a uma instrução if, siga esses passos: 


O Coloque a palavra-chave else depois da primeira instrução de ação. 


Indente alguns espaços na próxima linha de código para facilitar a leitura. 


(>) Escreva o código que é executado se o teste de condição for falso. 


Não existem 
perguntas idiotas 


P: Por que não existe um ponto-e-vírgula depois dos 
parênteses em uma instrução if? 


R: Aregra no JavaScript é que cada instrução deve terminar 
com um ponto-e-vírgula, e a instrução if não é uma exceção. 
No entanto, a instrução if não é apenas if (Test 
Condition), ela também é o código que é executado se a 
condição for true. Esse código termina com um ponto-e-vírgula. 
Então, a instrução i £ termina com um ponto-e-virgula, se você 
entender exatamente o que representa uma instrução . 


P: O que acontece quando o teste de condição é false em 
uma instrução i f que não possui uma cláusula else? 


R: Absolutamente nada. Neste caso, o valor do teste de 
condição resulta literalmente na não-ação a ser tomada. 


P: É possível usar mais de uma instrução else 
para escolher entre mais de duas possibilidades de 
resultado? 


R: Sim. Certamente existe a possibilidade de estruturar 
a instrução if/else para dar suporte a mais de dois 
resultados, mas não é tão fácil quanto adicionar cláusulas 
else a mais. Você pode acabar aninhando instruções if / 
else inteiras uma dentro da outra, podendo se desorganizar 
rapidamente, se você tiver tomando uma decisão complexa 
com diversos resultados diferentes. A abordagem if/else 
não é incorreta, mas o JavaScript oferece uma estrutura 
melhor de tomada de decisão para esta situação, a instrução 
switch/case, que você aprenderá um pouco mais adiante 
neste capítulo. 
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aventuras de um boneco de palito 


Uma aventura de proporções épicas 3 


Ellie está escrevendo uma aventura interativa chamada As Aventuras de um Boneco de Palito. O 
projeto dela envolve uma tomada de decisão em cada reviravolta na história, c cla espera que a 
tomada de decisão do JavaScript possa oferecer uma solução para o problema dela em colocar a 
aventura online para outras pessoas apreciarem. 


Å historia As Aventy 


2 as de um 
2 á 
neco de Palito Spresemba ao 


USUario uma historia interativa 


baseada em 

Wes ex n 

Z y Experimenta, 

2 VM heróico boneco ajan 


o mangaa ass de palito, 
Es Welcome to 
STICK FIGURE 
ADVENTURE EE historia, As Aventuras 

de um Boneco de Palito, a 

Click either interatividade de que ela 

button to E 

Z stat. 


Élie sonha com as 
reviravoltas e 
transformações no enredo, 
3 
m 
25 SE preocupa um pouca em 
como Forna-las realidade, 


Ellie deseja que a história de As Aventuras 
de um Boneco de Palito esteja online para 
permitir ao usuário navegar através da história, escolhendo entre duas opções 
em cada etapa ao longo do caminho. Você pode acompanhar através dos 
arquivos relacionados, disponíveis para download em hrtp:/ / www.headfirstlabs. 
com/ books) bjs). 
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À configuração da aventura 


A história As Aventuras de um Boneco de Palito é uma sequência de 
telas de cena onde cada uma possui uma imagem e uma descrição. 
Ainda mais importante, cada cena envolve uma tomada de decisão As cenas 2 e 3 

entre dois caminhos que evolui a história para uma outra cena. AZUR 


decisões gee resuttam em 
Mais cenas, 


Cena2 


Cada cena sempre apresenta 
exatamente dvas decisões para 
avançar a historia, 


Casinha na 


Cena 1 floresta 


ada cena possui 
7 


Cena3 ECA um numero 


paclusivo, 


Biturcação na 
estrada 


Bate com vista 


e Sempre ha uma cena atual gre PARR ONO 
representa a posição atval do 


i 7 
usuario na historia, 


Aponte seu lápis 
Escreva o código para uma instrução if/else que decide por - 


uma das três primeiras cenas em As Aventuras de um Boneco 
de Palito. Dica: uma variável chamada decision armazena 
a decisão do usuário, enquanto a variável curScene conterá 
a cena resultante. 
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solução aponte 


A ponte seu lápis 
Solução Escreva o código para uma instrução if/else 


que decide por uma das três primeiras cenas em 

P a As Aventuras de um Boneco de Palito. Dica: uma 

A variavel decision variável chamada decision armazena a decisão do 
marena a decisão usuário, enquanto a variável curScene conterá a cena 

MRTT e resultante. 

do usuario em V 


determinado porto do im 


historia; pe pode ser 


lw 2. 


A variável cur Scene contém 
a cena atual e, neste caso, 3 
avança a cena com base na Muda para a Cena 3. 
decisao do usuario, 


Muda para a Cena 2 


As variáveis determinam a história 


Vamos dar uma olhada nas duas variáveis usadas em As Aventuras de um Boneco de Palito, que,são 
críticas na resposta às decisões do usuário e, em seguida, adiantar a história de maneira apropriada. 


Qo 
es a 


€ Decisão escolhida pelo 
É usuário, que é sempre 1 ou curScene 
2. Essa decisão determina a Cena atual na história, que 
próxima cena na história. « sempre um número que 
corresponde à cena, como em 
Cena 1, Cena 2 etc. 


As variáveis decision e curScene trabalham juntas para armazenar a decisão do usuário e, em 
seguida, usa a decisão como base para adiantar a história. Esse processo se repete de cena a cena, à 
medida que a história continua a se desenvolver, tudo graças à instrução if/else. 
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Mas está faltando parte da história A nova cena 


a atual, 
A instrução if/else funciona bem como um 
instrumento para tomada de decisão de parte das 
Aventuras de um Boneco de Palito, mas a história 
toda não foi contada. Cada cena envolve imagem 
€ descrição em texto; imagem e texto de uma 
determinada cena são exibidos, conforme a história 
se desenvolve. Alterar o número da cena atual é 
suficiente para alterar a imagem da cena, mas não 
ajuda no testo de descrição da cena. Casinha ma 


O usuária escolhe a 
Decisão /, que leva à flores La 


Cena 2. 
Cena 1 


Bisurcação na 


estrada Imagem de cena 


Descrição de cena 


“Você chegou a uma 
linda casinha na 


floresta”, 
Uma imagem PAG é 
muito semelharrte A 
4 z a uma m OLF, descrição 
cena € r d Es 
O numero de mas eum de Cena não far 


iciemte para definir P - 
E A SEENA ge padrão mais recebe inclvida, pargue 
E de arquivo da e amplamerrte acerto. Some; e uma 
3 5 
ai cambém o e medida € omada 
imagem de cena Ebay 
7 
8. Es 
numero da cem decisão da cena, 


document .getElementById(“sceneimg”).src = “scene” + curScene.+ 
~“ ” 
-png”; 


Poder do 
XJ Cérebro 


Com capacidade para executar 
somente um único fragmento de 
código em cada parte da instrução 
if/else, você está limitado a 
apenas uma ação. Em outras palavras, 
você não pode exibir uma imagem e 
mostrar uma descrição de texto. 


Como você faria mais de uma coisa em 


resposta a uma decisão? 
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mais de uma coisa 


Como compor as atividades de seu JavaScript 


Ellie precisa ser capaz de fazer mais de uma coisa 
em cada desvio de código if/else. Ela precisa 
alterar o número de cena e o texto de descrição 

de cena, de modo que as duas linhas seguintes do e 
código possam avançar ao longo da história: a cena recemescolhida, 


V 


document .getElementById (“sceneimg”).src = “scene” + 
curScene + “.png”; 


alert (message) ; Es 


Exibe a mensagem de descriçao 
de cema da nova cena para o 
4 


Atera a imagem de cena para 


Ahal! Uma instrução composta 
me permite tratar um bloco de 
código grande como se fosse 
um único fragmento de código. 


O desafio é fazer mais de uma &AKfiêsmo que o JavaScript só 
permita executar um simples fragmento de código. A solução é 
uma instrução composta, que lhe permite moldar um bloco de 
código, fazendo com que ele apareça no script como um simples 
fragmento de código. Pode-se criar uma instrução composta 
incluindo uma série de instruções dentro de chaves ({}). 


doThisit); 


= 3 instruções 


doThat (); 


doSomethingElse () ; 


Combina as 

chaves de A 
abertura e 
encerramento 
para inclui o 


codigo, Us 


Com uma instrução composta, é possível criar instruções if/else que 
façam mais de uma coisa em cada desvio de ação: 


if (chosenDoor == “A”) { Faz Mais de uma 


prize =""danupar lard O coisa em cada desvio 


alert (“Você ganhou uma caixa de donuts!” de qm deUma 


instrução iff else, 


} 
else { 
prize = “rocha de estimação”; 


alert (“Você ganhou uma rocha de estimação!”); 
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P: Exatamente de que maneira As 
Aventuras de um Boneco de Palito 
usa as variáveis para conduzir a 
história? 


R: Em um determinado momento, 

a variável curScene contém o 
número de cena atual. Cada cena 
mostra uma imagem de cena e 

uma descrição de cena, e também 
apresenta ao usuário uma opção que 
permite escolher entre uma ou duas 
cenas. A variável decision contém 
a decisão de cena do usuário, 1 ou 2. 
Quando a escolha é feita, o valor da 
variável decision é usado junto 
como curScene para determinar 
a nova cena. Mais especificamente, a 
imagem de cena é alterada usando- 
seo valor em curScene, ea 
mensagem de descrição de cena é 
exibida usando-se uma caixa de alerta. 


Aponte seu lápis 


Não existem 
perguntas idiotas 


P: Por que é importante que uma 
instrução composta comprima 
várias instruções em uma? 


R: É importante, porque muitas 
partes da linguagem JavaScript são 
estruturadas em tomo da idéia de uma 
instrução simples. É como se uma 
empresa aérea lhe desse permissão 
para duas bagagens de mão. Nada o 
impede de enchê-las com uma porção 
de coisas, contanto que você se limite 
a duas. Então, instruções compostas 
são como uma parte da bagagem 

de mão em que é permitido enchê-la 
com várias instruções em um único 
“recipiente”, o qual é visto como uma 
instrução única em relação ao resto 
do script. 
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P: Por que uma instrução 
composta termina com um ponto-e- 
vírgula? 


R: O ponto-e-vírgula é reservado 
para instruções individuais, e não 
instruções compostas. Portanto, as 
instruções simples que aparecem 
dentro de uma instrução composta 
precisa ter o ponto-e-vírgula 
delimitador, mas a instrução composta 
não precisa. 


P: Uma função é uma instrução 
composta? 


R: Boa pergunta! E a resposta é sim. 
Você já deve ter notado que o código 
em uma função é cercado por chaves. 
Por enquanto, pense em uma função 
como uma instrução composta que 
você pode passar dados para dentro e 
fora dela. sa 


Reescreva o código para a primeira decisão if/else em 
As Aventuras de um Boneco de Palito. Dessa vez, use as 


instruções compostas para definir tanto o número de cena 
como a mensagem de descrição de cena. 
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Reescreva o código para a primeira decisão if/else em 


solução aponte 
Aponte seu lápis 
~ Soluçã 
As Aventuras de um Boneco de Palito. Dessa vez, use 
as instruções compostas para definir tanto o número de 


4 z 
O número de cena atual € cena como a mensagem de descrição de cena. 
ajustado com base na decisão 
Lomada pelo usuário 


A mensagem de 
descrição de cena 
e definida para, 
corresponder a 
nova cent, else i 


Inicia a instrução À, 


composta com 


uma chaye de 
abertura, 

Z 

É uma boa idéia 


E 


indembar o codigo Finaliza a instrução Uma mensagem de descrição 
dentro de uma composta com uma chave de cena diferente é 
instrução composta, de encerramento. definida para Cena 3: 


E 


Use a instrução i £ para executar = Use uma instrução composta para 
condicionalmente um fragmento de executar várias partes do código 
código JavaScript simples. JavaScript em vez de um fragmento de 
código simples. 
m O teste de condição em uma instrução 
if tem sempre que resultar em true ou m Crie uma instrução composta incluindo 
false. uma série de instruções individuais 
dentro de chaves (()). 
æ Usea instrução if/else para executar 
condicionalmente um ou dois fragmentos m Instruções compostas permitem que 
JavaScript diferentes. partes da ação das instruções if e if/ 


else façam mais de uma coisa. 
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E começa a aventura Cem Z, 
Algumas instruções compostas combinadas a uma decisão if / Y 
else transformaram As Aventuras de um Boneco de Palito no 

início de uma história online interativa. Está em suas mãos para 
que ela se torne uma aventura online totalmente operacional! 


Cena / 


A E Botão / escolhe 
O tu Wa 

e geme a Decisão A gee 

x 

+v Y levaovusvarioa 


Cena 2. 


Your journey begins at a fork in the road. 


Botão 2 
O texto de descrição de cem é escolle a 
exibido em uma caixa de alerta, Decisão EA 
se leva o 
DA 
usvaria à 
Cena 


Querido! As primeiras 
cenas da história ficaram 
ótimas! 


Your joumey begins at a fork in the road. 


E 
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as raízes da árvore de decisão 


E agora, o resto da aventura y 


Uma simples decisão dificilmente tende a resultar em uma história interativa interessante. 
Mas a Ellie tem planos, inclusive várias cenas adicionais, para tornar As Aventuras de 
um Boneco de Palito consideravelmente mais interessante. Juntas, essas 

cenas compõem uma árvore de decisão que você pode usar para Cena2 
indicar os diferentes caminhos através da história. 


; q Casinha na 
A cena de +rtulo leva à Cena floresta Da 
/, independentemembe de qual 


decisão o usuario Fome, 


1 
Cena O Cena 
OPegue o caminho. 
eça a 
Thule história. aia rA 
ada 
introdutorio o Pegue a ponte. 


Cena3 


5 Porte com vista 
À nova cena de +itvla serve E 

» A para a Mo 
como uma introdução para As 


Aventuras de um Boneco de Palito, 


Além de adicionar mais cenas à história, com novas reviravoltas e guinadas, Ellie também criou uma 
nova cena introdutória que aparece antes da primeira cena da história (Cena 1). À cena de título 
(Cena 0) é única, já que ela leva à Cena 1, independentemente de escolher a Decisão 1 ou a Decisão 
2. Em outras palavras, a Cena O não é um desvio na história, ao contrário, apenas os créditos de 
abertura. As novas cenas e aberturas estão prontas para você fazer o download em hrtp:/ / waw. 
headfirstlabs.com/ books) hfs/ . 
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Cena8, 4 
Pq 


Esgueire-se 
pela janela. 


Comtinva... 


^en para a bruxa. 
Comido 


pela bruxa 
FIM 
E cenas 
são becos 

7 


sem saida... 


literalmente! 
Sr 


Éssas decisões levam de volta 
x 7 
às cenas finais da historia, 


Comido por 


um ogra 


Diga olá para o ogro. 


Cena 9 -© 


é Passeie pela 
ponte. 


Q Contemple o 


Cérebro 


Como quê a árvore de decisão de As Aventuras de um Boneco de 
Palito se pareceria usando-se apenas as instruções if/else? 
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Não sei... depende 


Tomada de decisão em níveis com if/else 3 


Mesmo que cada decisão dentro da árvore de H (curScene is 2) 
decisão de As Aventuras de um Boneco de Palito H (decision is 1) 
possua duas opções, Ellie percebeu que as últimas Pule para Cena 4 
decisões dependem das anteriores. Por exemplo, Else 

para chegar à Cena 5, a partir do começo da Pule para Cena 5 


história, o usuário precisa seguir um caminho 
específico: Cona4 
Cena2 


4 


Bruna 


Casinha na 


na janela, 
Floresta 


Cena4 


0. a 


na janela. 


Cena2 


Casinha na 


Boteco ma Ripa 


estrada 


Não tem problema colocar 
uma instrução if/else 
dentro de uma outra? 


Conhecer a opção escolhida pelo usuário não é informação 
suficiente para decidir qual será a próxima cena. Ela precisa 
incluir como fator a cena atual. A solução é usar várias instruções 
if/else de tal maneira que você verifique primeiro a cena 
atual e depois tome uma medida com base na decisão do usuário. 
Mas essa abordagem de tomada de decisão em níveis envolve um 
i£ dentro de um if... uma proposta aparentemente estranha. 


Ou seja, até que você leve em consideração que tomamos decisões 
em níveis o tempo todo. Você já respondeu à pergunta, “Gostaria 
de fritas como acompanhamento?” Essa pergunta raramente se 
segue a um pedido de salada. A pergunta se baseia na resposta que 
você já forneceu, como “Eu quero um cheeseburguer”. Eis uma 
decisão em níveis, porque a última pergunta (fritas?) depende das 
respostas às perguntas anteriores (cheeseburguer ou salada?). 
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Um if pode estar dentro de um outro if. 


É perfeitamente legítimo colocar um if dentro de um if no JavaScript. Lembre-se, uma 
instrução if é sempre uma instrução, só que usada como parte da ação de um outro if. 
Em outras palavras, não há problema em complementar uma pergunta com uma outra 
pergunta. Um if dentro de um outro if é conhecido como uma instrução if aninhada. 


if (order == “cheeseburger”) ( 


As urho if (wantFries) 

S ins roger, order += “ fries”; 

if aninhadas sa , 

emtram em ação se bg a cad 
if 


as instruções [rá 


order += `“ fruit”; 
externas forem true, , 


Uma maneira mais rapida de dizer pedido = 
pedido + ... de modo gue o resultado seja 
salada e fruta ou cheeseburguer e fritas. 


ponte seu lápis 
Escreva o código da tomada de decisão para a Cena 
0 e Cena 1 de As Aventuras de um Boneco de Palito, 


certificando-se de usar as instruções if e if/else aninhadas 
quando necessário. 
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solução aponte 
Aponte seu lápis 
~N Solução 


Cena O sempre leva à Cena /, portamo não ha 
necessidade de nenhuma instrução i aninhada. 


Escreva o código da tomada de decisão para a Cena 
O e Cena 1 de As Aventuras de um Boneco de Palito, 
certificando-se de usar as instruções if e if/else 
aninhadas quando necessário. 


Define a mensagem da 
descriçao da Cena /. 


Se a cena atual 

não for a Cena 

0, verificamos 
7 

see alem /. 


a decisao do 
7 
usuario para a 


n Fhe bridge overlooking a peaceful stream. 


ajuda-o a Ee E e e cena TATT 


es e EREE EEE Por OTIS 7 Se BUD per o e ROD SE EN PE 
instruções 
estão aninhadas 


dentro de 
outras, 


1 
É extremamente importante combinar cuidadosamente 
as chaves de abertura e encerramento, 
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Suas funções controlam suas páginas 


Um par de botões (“1” e “2”) na página da web de As Aventuras de um Boneco de Palito é 
como os usuários percorrem a história. Quando eles decidem clicar em um dos botões, a função 
changeScene( é chamada para alterar a cena, com base no botão de decisão que foi clicado. 


function changescene (option) ( 


J 
</script> 
</head> 
<body> 
<div style="margin-top:100px; text-ali 
<img id="sceneimg” src="scenel.png” alt="sr 
Sinatra -Png” alt="Scick Figure Adventure” /><br /> 
<input type="button” id="decisicni” value=”]” 
<input type="button” id=”decision2” y an 
ma ision2” value=”2 
</body> 
</html> 


onclick="changeScene (1) “s 
onclick="changeScene (2) 


A pagina da web possui dois 

sotões que são usados para 
A função changeScene () recebe a decisão do usuário determinar a proxima cena 
(“1” ou “2”) como seu único argumento. Esse fragmento de 
informação é tudo que a função precisa para alterar a cena. 
Especificamente, a função changeScene () manipula: 


4 
na historia, 


0 A definição da variável curScene para o número da nova cena. 


O A definição da variável message para o texto de descrição da nova cena. 


[5] A alteração da imagem de cena com base no valor de curScene, e 
exibe a mensagem de texto de descrição de cena. 
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pseudo ò quê? 


O pseudocódigo permite planejar sua aventura 


Elie tem uma idéia geral boa de como criar a função changeScene() para implementar a 
árvore de decisão de As Aventuras de um Boneco de Palito com código JavaScript. Porém, 
uma mera quantidade de decisões pode transformá-la em uma proposta confusa antes de 
começar a codificação. Às vezes, é mais prático escrever primeiro a árvore de decisão em 
pseudocódigo, que é uma mancira espontânea, mais legível e também muito informal de 
expressar o código de criação de scripts. Uma vez eliminado o pseudocódigo, o verdadeiro 
código JavaScript ficará muito mais claro e menos suscetível a erros de escrita. 


Cada instrução AT 
else de nivel superior 


Titula 


Jump to Scene 1 


Br imbradotário 
cen 
representa uma Set Scene 1 message 
ditere 
is 1) 
Cona1 
If (decision is 1) 
Biturcação na 
As instruções “a Jump to Scene 2 estrada 


else Lomam medidas 
com base ma decisão 


do usuario, Else 


Set Scene 2 message 


CenaZ 


Jump to Scene 3 


Casinha na 


Set Scene 3 message SF Seresta 
TE (curScene is 2) 


Não existem 
-perguntas idiotas 


d P: O pseudocódigo se parece muito com o código 
JavaScript. Por que perder tempo? 


R: você não precisa perder tempo, mas a idéia é simplificar 
o processo de conversão de uma árvore de lógica complexa 
em código JavaScript e, ao mesmo tempo, minimizar o risco 
de cometer erros. Como o pseudocódigo não possui o mesmo 
nível de detalhes do código JavaScript, você pode concentrar 
seu trabalho mais na lógica de como uma cena leva à outra, 
do que na verificação da localização correta de cada chave e 
ponto-e-vírgula. Uma vez familiarizado com o pseudocódigo, 
traduzi-lo em código JavaScript é praticamente automático. 
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if? 


R: Não. Na verdade, se só estiver aninhando uma instrução 
5 £ simples dentro de uma outra instrução i f sem nenhum 
outro código, é mais simples omitir as chaves, já que 
tecnicamente você não precisa de uma instrução composta. No 
entanto, em uma distribuição complexa de instruções i £, pode 
ser vantajoso usar chaves mesmo quando não for estritamente 
necessário, só para tomar a distribuição mais evidente. 
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À Imãs de geladeira Javascript 
SE Está faltando aig á 
faltando alguns fragmentos de código na função changes di 
Aventuras de um Boneco de Palito. Use os imãs para terminar o Sódio. PRL fa 
Ee de cena na página 152. Observe que nem todos os códigos de decisão 
le cena são mostrados — algumas cenas foram omitidas intencionalmente. 


function changeScene (option) { 


var message = 


1 


.. (curScene == 0) 


curScene = ; 


message = “Sua jornada começa em uma bifurcação na estrada.”; 


message = “Desculpe, tem um ogro que mora do outro lado da ponte e você“ + 
“agora é o almoço dele.”; 


curscene = é 


message = “Seu contemplamento é interrompido pela chegada de um ogro 


enorme.”; 


== 4) í 


if (option 1) i 


curscene 


curscene = i 
message = “Desculpe, você agora faz parte do ensopado da bruxa.”; 


document .getElementById(“sceneimg”) .src = “scene” + curScene + 


alert (message) ; 
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solução dos imãs JavaScript 


ira Javascript 


ses 
SAN E 
[i Está faltando alguns fragmentos de código na função changeScene() de As 
Aventuras de um Boneco de Palito. Use os imãs para terminar o código que falta no 
diagrama de cena na página 152. Observe que nem todos os códigos de decisão 
de cena são mostrados — algumas cenas foram omitidas intencionalmente. 


function changescene (option) { 


var message = “”; 


m ES 


nada começa em uma bifurcação na estrada. ”; 


message = 


| tem um ogro que mora do outro lado da ponte € você + 


agora é o almoço dele.”; 


“se emplamento é interrompido pela chegada de um ogro 


message = 


enorme.”; 


da bruxa.”; 


você agora faz parte do ensopado 


document .gecElementById(“sceneimg”) src = “scene” + curscene + “.png”; 


alert (message) ; 
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Continuando com As Aventuras de um Boneco de Palito 


O script de As Aventuras de um Boneco de Palito agora reflete toda a árvore de decisão, 
permitindo que você navegue pela história ao longo de diversos caminhos. Eis um deles: 


r ay ` Cena /. 
Welcome to y io E e 
STICK FIGURE [9j 
ADVENTURE "FA 
O) Emir 
IN Cena 3. i ~n 
\ EA 


É impressionante ver a minha 
história ganhar vida em uma página 
interativa da web. Mal posso 
esperar para voltar a escrever a 
história. 


Cena E. 
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desenhando uma peça mal-acabada 


A disparidade de um boneco de palito 


Infelizmente, Ellie já está encontrando problemas com As Aventuras de um 
Boneco de Palito. Após liberar a página para alguns amigos como teste, alguns 
deles informaram sobre uma janela estranha que exibe uma mensagem em 
branco. A “janela fantasma” é isolada quando uma nova aventura é iniciada, 
após o término da anterior. Então, o problema está de algum modo associado à 
mudança da Cena 0 para uma outra cena. 


Uma janela Fantasma sem conte, 


nenhuma mensagem? 


Welcome to 


-=~ STICK FIGURE 
AS - ADV Lim. 


Dy 


A caixa de alerta vazia é 
vergonhosa. Prefiro que não 
aconteça nada. 


Existem somente duas cenas que possuem um caminho de volta à Cena 
0: Cena 5 e Cena 6. Essas duas cenas levam de volta à Cena 0, porque 
elas representam a conclusão da história. Portanto, quando a história 
terminar faz sentido começar outra vez desde o início. Então, Ellie isolou 
o código na função changeScene() que manipula a alteração dessas 
duas cenas de volta à Cena 0: 


As Cenas S el 


Z 
definem a variavel 


curscene = 0; E 
, curScene, mas não 


else if fcurScene == 6) ( f FA 
curScene = 0; azem nada para à 


) variavel message. 


else if (curScene == 5) ( 


Embora não haja nada que se destaque nesse código simples, dê mais uma 
olhada no código na parte superior da função changeScene(), que se 
encarrega da troca de imagem da cena e da exibição do texto de descrição de 
cena. 


document .getElementById ("sceneimg”) .src = “scene” + curScene + *.png”; 
alert (message) ; 


Exibe o texta de descrição de cena, que 
esta armazenado na variável message. 
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!= Psiu, não tenho nada para lhe dizer. 


O problema com o código de As Aventuras de um Boneco de Palito é que 

ele sempre exibe uma caixa de alerta com a mensagem de descrição de cena, 
mesmo quando não há mensagem para exibir, como no caso da Cena 0, quando 
recomeça a aventura. Mas como você pode verificar se a variável message de 
fato contém o texto de descrição de cena? 


Precisamos de uma forma de 
nos certificar de gue a caixa de 
alerta não sera exibida guando à 
variável message estiver vazia. 


A solução envolve a verificação de texto vazio (“”) da variável 
message antes de exibir a caixa de alerta. Ou expressando 
de uma outra forma, a caixa de alerta só é exibida se a variável 
message não for igual a uma string vazia. Parece uma 
maneira, às avessas, de resolver o problema, mas lembre-se 
de que você está tentando propor um teste true/false para 


Tesi o veios CHA) aa quando estiver tudo certo para exibir a caixa de alerta. 


[ay 
pageta cena, exceto a Cena 6, Assim como o operador de igualdade (==) que permite 


verificar se dois itens são idênticos, o operador de 
desigualdade (t=) verifica se dois itens são diferentes. 


if (curscene != 6) 
alerr (“Ainda bem que você não foi comido pelo ogro.”); 


Reescreva o código que exibe a mensagem de descrição 
de cena de As Aventuras de um Boneco de Palito em 
uma caixa de alerta, mas dessa vez certifique-se de só 
exibir a caixa de alerta se a mensagem realmente possuir 
dados de texto. 


você está aquip 163 


solução aponte 


Aponte seu lápis 
Solução Reescreva o código que exibe a mensagem de descrição 
de cena de As Aventuras de um Boneco de Palito em 
uma caixa de alerta, mas dessa vez certifique-se de só 
4 ja ibir a caixa de alerta se a mensagem realmente possuir 
endadeiro exi g p 
Isso ever ie dados de texto. 
Cervo) somer 
sea MENSAGEM a y 
contiver vma E messagi 
string com texto, 


alerdmessaçe: 


Decisões qualificadas com operadores de comparação 


Igualdade e desigualdade não são os únicos operadores de 
comparação que você provavelmente vai achar útil, ao criar 
condições de teste e tomar decisões em seu código JavaScript. 


Tve se x for UATOR Qué 


Ip aso contrario false 


Igualdade Desigualdade Manar que Maior que 


x=y x I=y 


True se x for any 


IévAL amcaso Tue se x for DIFERENTE True se x for MENOR Qu 


= <y x>y 


Eanes Salso deg, caso combrária false Jo caso combrário false 
Negação Menor que ou igual a Maior que ou igual a 
Me x<y x>=y 
False se x for true, gi os Too Ao Tvé se à for UA TOO QUE OU 
true se x for false, no tem caso ILALL As, a 
false 


Os operadores JavaScript, como esses 
operadores de comparação, são usados para 
criar expressões que são blocos de código 
JavaScript associados de alguma forma a 


= e = = são completamente 
diferentes. 

E a Quando você tiver intenção de 
um único valor. Expressões representadas PRESTE ATENÇÃO! Comparar dois valores de igual- 
como operadores de comparação oferecem dade, certifique-se de usar==, e 
um resultado booleano (true/false), que as não =. Caso contrário, você acabará atribuindo 
auxilia a construir a lógica da tomada de um dos valbros & possivelmente criando todos 
decisão usando instruções if/else. Os tipos de bugs: novos e raros. 
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Não existem 
perguntas idiotas + 


EÈ Por que o operador de negação só usa um valor 
único? 


R: Enquanto a maioria dos operadores de comparação exige 
dois operandos, o operador de negação exige apenas um. E 
o seu trabalho é muito simples: reverter o valor do operando. 
Então, true se toma false e false setoma true. 


P: Eujá vium operador de negação ser usado em um valor 
que não é uma comparação. Como isso funciona? 


R: O código que usa o operador de negação em um valor 
de não-comparação está se aproveitando de um detalhe 
em relação a como o JavaScript determina a “fidelidade” 
de um valor. Se você usa um valor de não-comparação em 


uma situação onde se espera uma comparação, qualquer 
valor diferente de null, O ou `“ será automaticamente 
interpretado como t rue. Em outras palavras, a presença de 
dados é considerada um valor true, do ponto de vista da 
comparação. Então, quando ao vir o operador de negação ser 
usado em um valor de não-comparação, nu11, 0 e** são 
negados para true, enquanto todos os outros valores são 
negados para false 


F: Espere, o que é null? 
R: nu11 é um valor especial em JavaScript que representa 


a ausência de dados. Faz mais sentido no contexto de objetos, 
que será abordado nos Capítulos 9 e 10. 


y 
Exercício 


var quote = “” 


if (a != 10) 
quote += “Algum cara”; 
else 
quote += “Eu”; 
(pb == (a* 3) Í 
if (e< (b7 6)) > 
+= “não me preocupo 
ic >= (b / 5)) 
+= 


if 


quote 

else if 
quote 

else 
quote 


+= “amo”; 


$ 

else { 
quote += 

} 

if (1d) É 
quote += 

} 

else { EA 
quote += “Rocha, papel, tesoura 

} 


“realmente odeia”; 


“Boneco de Palito”; 


alert (quote + “Aventura!”}; 


“não consigo me lembrar”; 


Esse código é capaz de exibir uma mensagem positiva sobre As Aventuras 
\ de um Boneco de Palito. Que valores os quatro valores a, b, ced devem 
ter para preencher a mensagem com sucesso? 


& E jurcáeis 
D = ssssceee 
C S cumes 
E Ss . 
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solução do exercício 


Esse código é capaz de exibir uma mensagem positiva sobre As Aventuras 
de um Boneco de Palito. Que valores os quatro valores a, b, ced devem 
Solução do ter para preencher a mensagem com sucesso? 


Exercicio 


(0 


a = ursos 


var quote = 


if (a != 10) 
quote += “Algum cara”; 
else 


quote += “Eu”; 
if (b == (a * 3)) € 
if ic < tb 7 6)) Xe 
quote += “não me preocupo”; kJ Ra 
else if (c >= (b / 5)) J 
quote += “não consigo me lembrar”; 


d tem que ser False 


else 
para que la seja +rve. 


quote += “amo”; 


} 
else { o 
quote += “realmente odeia”; 


À mensagem positiva se 
7 
estavamos procuranda 


v 


1 love Stick Figure Adventure! 


e 


h 
if (ta) t q va 
quote += “Boneco de Palito”; 


} 
else | Em 
quote += “Rocha, papel, tesoura”; 


} 


alert (quote + “Aventura!”); 


Comentários, placeholders e documentação 


As Aventuras de um Boneco de Palito é um bom exemplo de um script que possui blocos de código 
inacabados porque a história ainda está sendo desenvolvida. Por exemplo, as Cenas 8 e 9 são cenas 
de continuação que ainda aguardam algum trabalho criativo da Ellie. Pode ser útil sinalizar as áreas de 
código inacabado com notas em placeholders para que você não se esqueça de preencher os detalhes- 
mais tarde. Os comentários JavaScript possibilitam a adição de notas ao código sem afetar a forma 
como o código é executado. 


4 
O texto do comentario 
po er gralquer 

omembário começa com efisa gue você gueira 


Ume à 
a dupla, ph elee ignorado pelo 
H jae EF interpretador de 


VavaSeript. 
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Os comentários no JavaScript começam com // 


pés sas i x Conas 
Um comentário criado com // se estende das barras até o fim da linha. 

Para criar um comentário como um placeholder, siga as barras com uma 

observação que indica que haverá mais código. ERE 


s 


tssas linha? > else if (curscene == 8) ( 
4 codigo são // CONTINUA SR 
e 


la 
Car N else if (curScene == 9) { 
? £/ CONTINUA 
imberpr 11 ea Pr Corta 


Os comentários não são apenas para os placeholders. Eles são mais usados 
para documentar o código, de modo que ele fique mais organizado e fácil de 
entender. Só porque agora você sabe como um fragmento de código funciona 
não significa que terá essa memória maravilhosa em relação a ele mais tarde. 

E existe sempre a chance de alguma outra pessoa herdar seu código, e 
certamente, ela se beneficiará das observações sobre como ele funciona. Ésse comentario 


explica a inicialização 
// Inicializa a cena atual para F. 
da variavel. 


a Cena 0 (Intro) 
var curScene = 0; 


A inicialização da variável curScene em As Aventuras de um Boneco de Palito está 
mais clara, graças ao comentário detalhado. Um comentário semelhante poderia ser 


usado para esclarecer a inicialização da variável message. 4 
p ü já Mais uma vez, um comembario 


7 
// Limpa a mensagem de cena esclarece a que esta acontecendo 
pie 7 


var message = “"; no codigo que o precede. 


Se você precisa de um comentário que ultrapasse mais de uma 
linha, você pode criar um comentário com várias linhas. 


r 
Os comentários cam > EE + $ Início do comentário p 
Varias linhas se Os comentarios 


mpre 


etia T sir 
linhas sempre 
Os comentários de uma começam com 
E 
2ng, 
única linha começam 


com //, enquanto os Um comentário com várias linhas pode ter a extensão que você 
comentários com várias Pis Você só precisa começar com /* e terminar com */. 


o, = 2, mS, /* Todas essas linhas de código são um único 
linhas são delimitados comentario Grande. É Sério, eù PAS enteu 

x * brincando. Sem brincadeira, isso ainda faz parte 
por Me"). do comentário. */ 
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onde eu coloquei aquela variável? 


Espere aí! Os comentários fazem sentido, 
mas não entendo porque curScene e as 
variáveis message são criadas em lugares 
diferentes. Como é isso? 


curSecene € criada fora da função 
change SceneO, 


ntext/javascript”> 


<script type= cena 0 (Intro) 


Inicializa a cena atual para a 


tt 

var curscene = 0; 

function changescene (decision) ( 
// Limpa a mensagem de cena 


var message = 


} 


</script> 


message é criada dentro da 
função change SceneO. 


Localização, localização, localização das variáveis 


im como no ramo imobiliário, localização significa tudo para o JavaScript. Neste caso, o lugar 


onde as variáveis de As Aventuras de um Boneco de Palito são criadas tem muita importância. Em 
outras palavras, não é por acaso que cur Scene é criada fora da função changeScene (), 
enquanto message é criada dentro da função. O motivo é o escopo, que controla a vida útil de 


uma variável, bem como qual código pode acessá-la. 
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Escopo e contexto: Onde os dados residem . 


Em JavaScript, o escopo se refere ao contexto de dados, como onde os dados 
residem e como eles podem ser acessados. Dependendo de seu escopo, alguns dados 
podem ser vistos em qualquer lugar do script, enquanto outros dados são limitados a 
um bloco de código específico, como uma função. Eis um exemplo de duas variáveis 
que residem em lugares totalmente diferentes: 

Variável global, visivel 
em Lodo o script. 


function doSomerhing (z) 


{ 
, 4 

Variaveis locais, visiveis 

apenas dentro da função, 


Nesse código, x é considerado uma variável global, já que ela é criada fora de qualquer função 

ou outro bloco de código e, portanto, pode ser vista por todo o script. Ainda mais importante, x 
permanecerá “viva” enquanto o script estiver executando. Ao contrário de x, y é uma variável local 
cuja visibilidade é confinada ao código dentro da função doSomething (). Além disso, y só existe 
enquanto a função doSomething () estiver executando — ela é criada quando a função inicia e 
depois é destruída quando a função termina. 

Variaveis globais são mantidas 
nas proximidades por Hoda a 
vida de um script. 


Por enquanto tudo bem, mas onde isso deixa z, o argumento 
para a função doSomething () ? Acontece que os 
argumentos de função agem como variáveis locais que já 
foram inicializadas. Portanto, z possui o mesmo escopo de y, 
significando que ele só pode ser acessado de dentro da função. 


/ mo 
Variaveis locais são criadas 

7 
e destruidas conforme 
determinado por seu escopo, 


Es 


A visibilidade dos dados fica disponível para quando 
precisar saber, o que significa que você deve limitar a 
acessibilidade sempre que possível. Isso ajuda a evitar que 
os dados sejam alterados inadvertidamente pelo código que 
não tem nada a ver acessá-lo. Em termos práticos, isso significa 
que as variáveis locais devem ser usadas sempre que possível. 


Poder do 

Cérebro 
Como as variáveis globais e locais se encaixam no código de As Aventuras de 
um Boneco de Palito? 
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as aventuras da localização das variaveis 


Verifique o resultado da variável de sua aventura, 


Recordando as variáveis de As Aventuras de um Boneco de Palito, agora com o 
conhecimento sobre variáveis locais e globais, é possível ter uma idéia melhor de o 
porquê as variáveis são criadas em lugares diferentes. 


O valor da 
variável message 
e redefinido a 
Lada momento 
através da função 
change SceneO, 
bes 255 ela 
funciona bem como 
uma variavel local. 


<script type="text /javascript”> 
// Inicializa a cena atual para a Cena 0 (Intro) 


var curScene = 0; 


function changeScene (decision) ( 


// Limpa a mensagem de cena 
var message = »”; 


Jif (cursScene == 0) ( 
curScene = 1; 
message = “Sua jornada 


começa em uma bifurcação na estrada.”; 


else if (curScene == 1) { 
if (decision == 1) ( 


[9] valor da curScene = 2 

Pe ah gi so à message = “Você chegou a uma linda...”; 
deve ser else ( 

martida na meia curScene = 3; 


messa. - Você á 
ge ocê está posicionado em uma ponte. ..”; 


das chamadas 
paraa Junção l 
change SceneO, 
entao ela precisa 
ser uma variavel! 
global, 


} 
elsẹ if (curScene == 2) { 


| 


</script> 


A questão aqui é a necessidade de preservar o valor de uma variável fora do escopo da função 
changeScene (). A variável message é excluída do início da função, portanto seu valor não 
precisa ser preservado fora da função. A variável curScene, por outro lado, é verificada em vários 
testes de condições if/else. Então, esse valor zem que persistir no meio das chamadas das funções. 
Resultado, message pode ser criada localmente, mas, neste exemplo, curScene tem que ser 


global. 
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Onde residem meus dados? 


Se o escopo ainda intrigá-lo um pouco, isso talvez possa ajudar a lembrar as diferentes 
partes de um script como áreas independentes onde os dados podem residir. 
Por exemplo, o script de As Aventuras de um Boneco de Palito possui diversos 
escopos que você poderia usar para armazenar dados em outro lugar. 


Vscapo global ov 
mvel de script. 
Escopo local 
paraa função 
change SceneO. 


Variavel 
local 


scopo local para 
cada instrução 
composta ditereme. 


Só existe um único escopo global para criar variáveis 
globais, o resto é local. Qualquer coisa criada em nível 
global pode ser vista por todo o script, enquanto os dados 
locais só podem ser vistos e usados dentro de seu escopo 
limitado. 


Não existem 
perguntas idiotas 
P: Eu tenho alguns dados. Que tipo de variável devo usar para armazená-los: local ou global? 


JR: Amaneira como você usa os dados determinará se ela precisa ser local ou global. Mas já que perguntou, a regra geral 
é tentar criar todas as variáveis como local e usar a global somente como recurso, caso a local não funcione. 
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o confronto: variável local e variável global 


Conversa informal 


dados. 


Variável Local 


Acho útil se concentrar apenas no que está 
acontecendo à minha volta. Na verdade, eu 
nem tenho como lhe contar sobre o que está 
acontecendo fora da vizinhança onde vivo, e eu 
gosto muito que seja assim. 


Embora isso pareça tentador, gosto da segurança 
de ambientes tranquilos. Eu descanso fácil 
sabendo que ninguém de fora da minha pequena 
área pode me incomodar. 


Ai! Não tenho certeza se acredito em toda essa 
coisa de reencarnação, mas posso lhe dizer que 
sou cada bit de armazenamento de dados tão 
prático quanto você. Apenas não quero me 
colocar lá fora para qualquer um me ver. 


E quando um script precisa guardar alguma 
informação isolada de uma certa seção do 
código, ele me procura por causa do meu dom 
para a discrição. 


E é por isso que as pessoas ainda nos acham úteis. 


172 Capitulo 4 


Conversa dessa noite: A variável Local e a 
variável Global discutem sobre a importância 
da localização ao encontrar um lar para os 


Variável Global 


Cara, você precisa realmente expandir sua visão 
de mundo. Saia e viaje um pouco, verifique 
outras partes do universo do script. 


“Talvez, mas você tem conhecimento do fato de 
que a sua vidinha é inexpressiva no contexto. 
geral do script. Você é criada e destruída várias 
vezes, sempre que o seu mundinho vai e volta, 
enquanto eu estou aqui por um longo período de 
tempo. Se o script estiver aqui, eu também estou. 


justo. E eu admitirei que me usam de maneira 
inapropriada uma vez ou outra, mas o meu 
lado positivo, sempre conservando o meu valor 
nos bons e maus momentos, é suficiente para 
compensar os problemas. Quando um script 
precisa de um fragmento de dados que lembre 
seu valor e que esteja disponível em qualquer 
lugar, ele me procura. 


Que ótimo, mas algum dia eu assumirei a 
acessibilidade e a persistência em detrimento da 
privacidade. 


P: O que acontece se o código 


Não existem 


perguntas idiotas 
P: Por que os comentários não 
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P: Se eu criar uma variável dentro de 


JavaScript existente é colocado dentro terminam com um ponto-e-vírgula? uma instrução composta, ela é uma 
de um comentário? variável local? 

R: Porque eles não são instruções 
RR: Nada! Comentários são JavaScript. Comentários são rótulos que R: sim. Uma instrução composta 
completamente ignorados pelo não fazem nada além de descrever ou estabelece um novo nível de escopo, 
interpretador de JavaScript, portanto tudo fomecer informações adicionais sobre o portanto tudo que for criado dentro de 
que você coloca dentro de um comentário código, mais ou menos como as notasde uma instrução composta possui um 
é desconsiderado quando o interpretador rodapé em um livro. O mais importante escopo local dentro dessa instrução. 
inicia a execução do código de script. a ser lembrado é que o interpretador Tais variáveis podem ser consideradas 
Sabendo disso, os comentários podem JavaScript ignora todos os comentários como variáveis temporárias, já que elas 
ser usados como um meio de desabilitar — os comentários estão ali para o cérebro são criadas e destruídas toda vez que o 
temporariamente fragmentos de código humano e não para o JavaScript. fluxo da execução do script entra e sai da 
para identificar um problema ou tentar instrução composta. 
abordagens diferentes de codificação. 

P: O que significa “nível de script” em 

relação à criação de variáveis globais? P: Escopo, fluxo, execução... essa 
P: Uma linha de código JavaScript coisa de variáveis local e global parece 
pode ter um comentário de uma única Ri Nível de soipt é o nivel superior realmente complexo. É assim tão 
linha no final? do código de saript, que se encontra dificil quanto parece? 

exatamente dentro da tag <script>. 
R: Sim. E neste caso, o códigoainda O significado do "nível de script é que JR: Nem tanto. O mais importante a ser 
é executado, porque não faz parte do ele se encontra fora de qualquer função lembrado é que as variáveis locais são 
comentário, Um comentário de uma única ou outro bloco de código e, no entanto, perfeitas para armazenar informações 
linha não ocupa necessariamente uma tudo que for criado no “nível de script” temporárias que você não precisa se 
linha inteira — o comentário começa a é considerado global. Isso significa que lembrar do lado de fora de uma função 
partir de // até o fim da linha. Então, se// tudo que for criado no “nivel de script” ou um outro bloco de código. Se você 
antecede um fragmento de código, ainda vive por toda a vida do script e pode ser quer que os dados estejam disponíveis 
assim ele será executado normalmente. acessado por qualquer código dentro da por toda a vida do script, então deve 

página. tomá-los uma variável global. Por incrível 


Variáveis locais armazenam informações 
temporárias, variáveis globais são 
armazenadas por toda a vida do sexipt. 


Co tis de Bala 


Comentários são uma ótima maneira . 
de lembrá-lo sobre a posterior adição de 


código. 


=m Não tenha receio de usar muitos 


comentários para documentar seu código, . 
fazendo com que ele fique mais fácil de 


que pareça, a maioria dos dados de 
script tende a ser mais temporário do 
que poderia pensar inicialmente, o que 
Ar o ania, usará mais 
variáveis locais do que variáveis globais. 


Variáveis globais são criadas no nível de 
script, fora de qualquer função ou outro 
corpo de código e são mantidas nas 
proximidades durante a vida do script. 


Variáveis locais são criadas (e destruidas) 
dentro de um corpo de código, e só pode 


entender. ser acessada dentro desse código. 


Variáveis locais são preferidas em 
detrimento das variáveis globais, porque 
seu acesso é rigidamente mais controlado. 


m Use uma barra dupla (//) para iniciar um D 
comentário de uma única linha. 


m Comentários de várias linhas começam 
com /* e terminam com */, 
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repleto de opções 


Cinco opções RES 


E dois 
Você se lembra do Eric, nosso concorrente pus Pozez DS atra 
do show no início do capítulo? Parece cc UMA apos) 
que Eric acabou com seus donuts e i. e 

avançou para uma última rodada de Quer fager uma 
aposta? O problema é que ele agora enfrenta uma decisão 
extremamente desafiadora... ele tem que escolher entre 
uma das cinco opções. 


Nossa, eu realmente 
poderia usar alguma ajuda 
para tomar esta decisão. 


Poder do 
Cérebro 


Como você codificaria uma decisão 
JavaScript que envolvesse cinco opções 
diferentes? 
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Você não poderia usar só um 
punhado de instruções if/else 
para escolher entre cinco coisas? 


Cinco opções 

Boa idéia! Embora a instrução if/else seja 
direcionada para a tomada de decisão entre duas 
coisas, várias delas podem ser aninhadas para 
escolher entre tantas coisas que queira. 


if (chosenCase == “A”) 


openCase (“A”); 


else if (chosenCase == “B”) 


openCase (“B”); 


else if (chosenCase == “C”) 

openCase (“C”); 
else if (chosenCase == “D”) 

Esse códiço funciona, saia opencase (“D”) ; 
a de ela else if (chosencase == “E”) 


avaliado, que € id openCase (“E”) ; 


Aninhar if/else pode ficar complicado 


As instruções if/else funcionam bem... mas elas não têm toda essa 
eficiência, primeiro porque elas não foram criadas para tomarem decisões que 
envolvam mais de duas possibilidades. Para entender quantos testes booleanos 
ocorrem no processo de escolha do último caso, o Caso E. Todos os cinco 
testes de condições são avaliados, o que é um pouco ineficaz. 
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vontade, esperança e escolha 
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Não seria um sonho se você 
pudesse escolher entre mais de 
duas coisas sem ter que usar 
todas aquelas instruções if/else 
ineficazes? 


tomada de decisão 


Instruções switch possuem vários cases. 


O JavaScript tem uma instrução para tomada de z FA 2 

decisão apenas para decidir entre várias opções. Ao A instrução switeh/ case 
contrário da instrução if/else, que se adapta a 

VEET S E O AR E A escolhe entre mais 


switch/case permite escolher com mais x o 
eficácia entre qualquer quantidade de coisas. de duas coisas com 


Vamos analisar o dilema de Eric através das lentes fã o o, 
de uma instrução switch/case: ieiencia. 


” n 
O case em 
switeh/case switch (chosencase) ( 
não Fem mada ch range O valor da pasta escolhida pelo 
para se com Eric faz parte da informação 
as pastas de opencase (“A”); controladora na instrução switeb/ 
metal do brie. bratki case, 
case “B”; 


openCase (“B”) ; ; r 
O codigo de ação € colocada ` 
break; 


imediatamente abaixo de sua 


pr > case “C”: instrução case correspondente. 


openCase (“C”); 
Cada possibilidade 


de ~ é break; 
opção A 
ù x 4 
codificada usando case “D”; instrução break é necessária 


k ar ; 
uma instrução case. para terminar cada desvio de decisão 
Para Sair imediatamente de Lada a 


break; Ein EA instrução switeb/ ca se, 


case “E”: 


opencase (“D”); 


opencase (“E”); A instrução switeh/ case esta 
estruturada como uma grande 


break; ce 
e = instrução composta, 
) 


Fato ou ficção? A instrução switch/case consegue fazer qualquer coisa 
que a instrução if/else faz. 


[O Fato [O Ficção 


Exercicio 


você está aqui» 177 


trocando as bolas 


Fato ou ficção? A instrução switch/case consegue fazer qualquer coisa que a 
instrução if/else faz. 

Sblução do 

Exercício O Fato [5 Ficção 


Ficção. Ao contrário de if/else, 
o teste de dados que controla 
uma instrução switch/case 
não pode ser uma expressão — 
tem que ser simplesmente um 
fragmento de dados. 


Dentro da instrução switch 


Agora que você viu uma instrução switch/case em ação, vamos eliminá-la e examinaremos o 
formato geral da instrução. 


o a RE qu 


precisa ser vm 


ec EN fragmento de dados, 


e não uma gapressão 
-ecele NAD avalia 
+rve ov false. 


E aa” Cada combinação 


Hermina com dois 
pontos je Ao 
com pomta-e- 


Cada desvio 

de decisão 
começa coma 
palavra-chave 
case, seguida da 
a a pe 


v. d é [instrução É 
ANIS, impede que o código 


opcional defavit execute em outros 
combém um codigo desvios de decisão. 


a ser executado R 

se nada mais E mm Todo o corpo p 

coincidir. da instrução e 
ER a encerrado dentro 


de chaves, 


virgula, 


A instrução break 
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Instruções switch case: escreva a sua 


Criar uma instrução switch/case é admitidamente mais complicado do que criar uma instrução 
if/else, mas é muito mais eficiente lidar com mais de duas possibilidades de resultado. Eis o 


processo: 


não houver correspondência. 


Feche a instrução composta ((). 


Não existem 
perguntas idiotas E 


P: Então, uma instrução switch/case 
toma uma decisão usando uma expressão 
true/false? 


R: Correto. Ao contrário de uma instrução if / 
else, switch/case usa um fragmento de teste 
de dados para tomar decisões. É como ela aceita 
mais de dois resutados. 


P: Então, cada case correspondente é 
apenas uma correspondência no teste de 
dados? 


R: Sim. A idéia é que você use uma variável 
como teste de dados e, em 


Interrompa 
por medida de 
segurança. 

PRESTE ATENÇÃO! Evite que o códi- 
go seja executado 

acidentalmente terminando cada 

correspondência switch-case com 
uma instrução break. 


Inclua o teste de dados entre parênteses e abra a instrução composta (f). 
Escreva o case correspondente seguido de dois pontos (:). 


Escreva o código a ser executado se houver uma correspondência. Ela pode 
ter várias linhas de código — não há necessidade de uma instrução composta. 


Adicione uma instrução break — lembre-se do ponto-e-vírgula (;). 


Opcionalmente, inclua um desvio padrão para quando 


Fico imaginando se uma instrução 
switch-case poderia ser usada para 
tornar As Aventuras de um Boneco 
de Palito mais eficiente... 


seguida, use valores literais para 
aplicar em cada correspondência. 


P: O que acontece se você não 
incluir todas as instruções 
break em uma switch/ 
case? 


R: Podem ocorrer resultados 
inesperados. As instruções 
break servem como divisores 
entre cada seção de código de ação 
em uma instrução switch/case. 
Sem elas, todo o código de ação 
executaria como um grande bloco, 

o que destruiria toda a proposta de 
tomar decisões diferentes. Quando 
uma correspondência é feita em uma 
instrução switch/case, o código 
abaixo do case correspondente é 
executado até que ele encontre uma 
instrução break. Somente então a 
instrução switch/case sai. 
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switch exposto 


Switch exposto 


Entrevista da semana: 
Os manda-chuvas e os tomadores de decisão 


Use a Cabeça: Estou contente que você esteja 
disposta a conversar conosco. Então, diga-nos como 
você se descreveria em apenas uma palavra? 


Switch: Seletiva. 
Use a Cabeça: Está disposta a dar mais detalhes? 


Switch: Eu possibilito a escolha entre várias coisas 
diferentes. Embora algumas situações envolvam 
decisões explícitas, existem muitas situações que 
exigem, digamos, mais sutileza. É onde eu entro. 


Use a Cabeça: Mas dizem que If pode fazer a 
mesma coisa, às vezes com menos código. 


Switch: Talvez seja verdade. E você pode cortar um 
pedaço de madeira com um martelo se você golpeá-lo 
várias vezes. Pessoalmente, prefiro usar uma serra. À 
realidade é que todos têm sua peculiaridade, e a minha 
é escolher de maneira eficiente entre y 
diferentes. Não tenho nenhuma objeção em relação 
a If, mas ela é uma ferramenta mais apropriada para 
uma outra tarefa. 


ias coisas 


Use a Cabeça: Você mencionou eficiência. Conte- 
nos como ela se inclui no que você faz. 


Switch: Bem, sou estruturada para tomar uma 
decisão baseada no valor de um fragmento de 

dados, e tudo o que faço é comparar esse fragmento 
de dados com possíveis correspondências para 
determinar que código executar. É isso. Eu não me 
dou ao trabalho de tentar avaliar as expressões, e não 
exijo aninhamento ou qualquer coisa bonitinha como 
essa para escolher entre vários resultados. Se você 
quiser tomar uma decisão rápida com base em um 
fragmento de código, sou a pessoa certa! 


Use a Cabeça: Fale-nos sobre o seu amigo Break. 
Soubemos que você não vive um só dia sem ele. 


Switch: Isso é verdade. Sem Break, eu estaria em 
apuros, porque não saberia separar os diferentes 
fragmentos de código de ação. Break me informa 
quando uma seção de código termina a execução, 
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eu posso sair sem executar acidentalmente nenhum 
outro código. 


Use a Cabeça: Entendi. E em relação ao Case, 
vocês também não são muito íntimos? 


Switch: Claro que sim. Case e cu temos uma relação 
muito intima, primeiro porque Case me informa 
todas as possibilidades de correspondências para um 
determinado fragmento de teste de dados. Sem Case, 
eu não teria base para tomar uma decisão. 


Use a Cabeça: Então, entendo que Case expõe as 
diferentes possibilidades de correspondências, e você 
usa essas correspondências para determinar o que 
fazer. Mas o que acontece quando o teste de dados 
não possui correspondente? 


Switch: Depende. Se nenhum código especial 

for adicionado para lidar com um cenário de “sem 
correspondência”, então nada acontece. No entanto, 
o meu bom amigo Default possibilita a execução de 
um bloco especial de código só no evento em que 
nenhuma correspondência foi encontrada. 


Use a Cabeça: Uau! Eu não percebia isso. Default 
se dá bem com Case? 


Switch: Na verdade, muito bem. Eles não pisam um 
no calo do outro, porque não competem por atenção. 
Case manipula todas as correspondências, enquanto 
Default cuida das situações quando nada mais 
corresponde, Muito aqui entre nós, acho que Case 
está um pouco aliviado com a presença de Default 
porque ele fica nervoso quando nada coincide. 


Use a Cabeça: Entendo. Bem, estamos próximos 
de acabar o nosso tempo. Alguma lembrança antes de 
você partir? 


Switch: Claro. Lembre-se de que não existe nada pior 
do que a indecisão. Ninguém gosta de indecisos. Não 
é por existir inúmeras possibilidades que significa que 
você tem que jogar tudo para o alto e desistir. Chame- 
me e cu tentarei fazer o melhor possível para ajudá-lo 
a tomar uma decisão que funcione bem em seu script. 


tomada de decisão 


Converta as duas primeiras cen ó 

as do código d 
Aventuras de um Boneco de Palito de oaae TR 
instrução switch/case no lugar de if/else. 


i£ (curscene == 0) t Éis a versão 


curscene = 1; 
urcação na estrada.” L 


message = “Sua jornada começa em uma bif ne original do 


codigo que 


} 
usa if{ else. 


else if (curScene 
1£ (decision 
curscene = 2 
message = “Você chegou a 
+ 
else į 
curscene = 3 
message = “Y 
trangüilo.”; 
} 


uma linda casinha na floresta.”; 


onado em uma ponte com vista para um rio 


cê está posici 
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solução inteligente 


nte seu lápis 


A 
~ Solução Converta as duas primeiras cenas do código de As 


Aventuras de um Boneco de Palito de modo a usar 
a instrução switch/case no lugar de if/else. 


Éis a versão 


if (curscene == 0) | original do 
r 


curscene = 1; na estrada.”; 
message = “Sua jornada começa em uma bifurcação código que 
usa if{ else, 


, 
else if tcurscene == 1) { 


if (decision == 1) { 
curScene 
message = “Você chegou a um: 
, 
else ( 
curscene = 3; 
message = “Você está pos 
tranqúilo.”; 
, 
) 


a linda casinha na floresta.”; 


icionado em uma ponte com vista para um ric 


4 
line é novo numero de 
cena e o Fexto de mensagem 


Cada par ~ 
P de descriçao de cena, como 
de case ho S: ~ E 
switch leur Scene) na versão if/ else. 
corresponde- 
A 
a um numero ~ SE 2 
de cena. cur Scene = /; 


Dentro decada messaçe= Sv 
case, ainda fas break; 
sentido aderir 
à if else para 
manipular a i (decision == /) f 
Monee a curScene = 2 
usuârio na 
historia. 


As cenas ei ne 
restantes pa esef 


case /: 


message = 


Seguem uma curScene = 3; 
estrutura ipa 7 
semelhante. as il 
Fecha a 
instrução 
swibehl case 


ne as 
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Uma mudança em As Aventuras de um Boneco de Palito: 
test-drive 


Após reformular completamente a lógica da tomada de decisão de As Aventuras de 
um Boneco de Palito, Ellie está se coçando para ver o resultado. As mudanças são 
imediatamente visíveis, à medida que você navega pela história... 


Welcome to 


STICK FIGURE 
ADVENTURE 


start. $ 


Tudo parece 
exatamente igual 


Nem todas as melhorias 
no script podem ser vistas 
da superfície... isso não me, 
incomoda. 


! 


| 
| Pare aí mesmo! 
] 
| 
| 
i 


Espere, não há nada diferente! É porque as alterações de 
switch/case em As Aventuras de um Boneco de Palito 
só afetam a estrutura do código, não a sua aparência. Eis 
um exemplo de como algumas alterações na codificação 
ocorrem puramente nos bastidores... literalmente! 
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e como isso termina? 


A história continua... - 


As Aventuras de um Boneco de Palito é apenas o início da história. 
É necessário uma narrativa criativa, poucas ilustrações do boneco de 
palito e muito mais código JavaScript para ser uma aplicação online 
verdadeiramente interessante, Onde você levará disso aqui? 


Cena? 


O script está ótimo, mas 
eu poderia me valer de 

alguma ajuda adicionando 
mais cenas às Aventuras 
de um Boneco de Palito, 
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Cruzadas do Javascript š 


Eis uma decisão fácil. Essa é a hora de fazer uma pausa e 
arrebentar nas palavras-cruzadas? Claro! 


Horizontal 


1. Escrevê-lo primeiro fica mais fácil para 
escrever um código JavaScript complexo. 

4. Use-os para documentar seu código. 

5, Esse tipo de instrução é composto de várias 
instruções. 

6. Quando uma instrução if é colocada dentro de 
uma outra, dizem para ser ....... 

8. O operador != a testa para 

10. Você pode usar uma dessas para ajudar a 
visualizar um grupo de decisões complexas. 
13. Todo o script possui acesso a esse tipo de 
variável. 


Vertical 


2. Faça isso, .... faça aquilo. 

3. Esses tipos de operadores retornam um 
resultado true/false. 

4. Como o código é executado quando ele faz 
parte de uma instrução if-else, 

7. Uma instrução que permite tomar uma decisão 
com base no valor de um fragmento de dados. 
9, Uma variável que possui escopo limitado. 
11. Essa instrução permite executar 
incondicionalmente um fragmento de código. 
12. Cada desvio de decisão dentro de uma 
instrução switch possui um desses. 
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solução das cruzadas do JavaScrip 


Solução das Cruzadas do JavaScript 
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RR Dobras rss TE 


Dobre a página E 
na vertical para Quando if/else não for suficiente... 
alinhar os dois 
cérebros e resolver 
a charada. 
9 É um encontro 8 
i de mentes! 


Cena1 


Ponte com 
vista para o 


Pons 


Bisurcação na 


estrada.. 


Embora a instrução if/else seja incrivelmente 
útil, ela tem suas limitações. Por exemplo, 
voce não consegue alternar entre mais de 
duas coisas. Caso não acredite, tente 

Switch voce mesmo. 
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5 Looping ; 
* 

O risco de 

me tornar repetitivo 


Vai equipe, vai! Vai equipe, vai! 
Vai equipe, vai! 


Dizem que a repetição é o tempero da vida. E é. Fazer algo novo e interessante 
é de fato excitante, mas são as pequenas coisas repetitivas que realmente possibilitam a superação dos 
obstáculos diários. A higiene compulsiva das mãos, um tique nervoso, clicar em Responder a todos em 
toda mensagem esquisita que você recebe! Tudo bem, talvez a repetição não seja lá grandes coisas no 
mundo real. No entanto, pode ser extremamente útil no mundo do JavaScript. Você ficaria surpreso com 
a frequência que um script necessita para executar um fragmento de código várias vezes, e é aí que 
o poder do loop realmente transparece. Sem os loops, você estaria perdendo muito tempo cortando e 
colando um punhado de código inútil. 


quantos “passos” para encontrar o tesouro enterrado 


O X marca o local 


É difícil demonstrar a fascinação por um tesouro 
enterrado. Eis o mapa de um tesouro que poderá ter 
algum auxílio do JavaScript. 


JT passos 


NO Depois, ande até ver uma 
rocha em forma de pipoca. 


O Primeiro, 
ande 37 passos 
em direção ao 


leste. 


O Ox mra 
realmente o local! 


A primeira parte do mapa pode ser percorrida repetindo-se a 
ação (dando um passo) em um determinado número de vezes 
(37). Portanto, dar 37 passos é uma questão de repetir um único 
passo 37 vezes. 


Dar um passo 
4 ~ 
E Uma ação 


repetitiva. 


Ei SOH 
Pi este Mrs passos é apenas 
Ae Es asso / passo repetido 
h, Sim, € Um tesoura! 37 a 


37 ciclos< "SO 


Então, a pergunta é... como o JavaScript torna possível a repetição? 
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Mais uma vez, déjà vu... loops for Loops for permitem 


A repetição no JavaScript é realizada com loops que permitem * E 

repetir o código. O loop for, em particular, é ótimo para repetir o código em 
repetir alguma coisa quando se sabe a quantidade de vezes. Por E 
exemplo, os loops for são ótimos para contar tarefas, como UM determinado 


tagem regressiva até zero ou somar algum valor. 7 m 
uma contagem regressiv u algu & denazea: 


Um loop for consiste em 4 partes diferentes: 


(1) icialização o 

A inicialização ocorre uma única vez, Inicialização 

no início de um loop for. | 

O Teste de condição (2) 

O teste de condição verifica se o loop Teste de condição 


deve continuar em um outro ciclo. 


(>) Ação (3 o 
A parte da ação do loop é o código Ação 
que de fato se repete em cada ciclo. 


(4) Atualização o 
A parte da atualização do loop atualiza Atualização 
quaisquer variáveis loop no fim de um ciclo. 


Os passos Z, Je 4y 


ocorrem uma vez em cada 


cielo completo de loop. $ 
N 
0..0-.0..0..0..0-.0.. 
4 
A 


A 


\ ) 
Um ciclo de loop Um outro 
Como os quatro passos de um loop for se ciclo de loop 


referem ao exemplo do mapa do tesouro? 
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loop for: contagem 


Caça ao tesouro com um loop for : 


Os loops for trabalham para trilhar o mapa do tesouro porque eles 
exigem que se saiba a quantidade de passos. Aplicar um loop for na 
primeira parte do mapa do tesouro ficará assim: 


f 
o (27 o Incrementa x, da mesma 


for (var x = 0; x < 37; x++) 


forma gue x = xt f. 
takeStep () ; EA 


o Nas loops do UavaSeript, é 
comum iniciar a contagem em O) 
embora ele possa ser facilmente 
madificado para começar em A 


O iniciatize a variável x do contador com 0. SE ap 


O Verifique se x é menor que 37. Se for, prossiga com o Passo 3 e 
continue o ciclo completo de loop. Caso contrário, encerre o loop. 


Decompondo o código para o loop for: 


/ 
€ O Execute o código de ação do loop, que neste caso significa executar a 


função takeStep (). 
S Lo 
Aumente x e volte para o Passo 2, possivelmente para iniciar um outro 
37 ciclos ciclo de loop. 


Após 37 ciclos completos de loop, ele termina com x igual a 37. Tudo isso, graças aos quatro 
fragmentos do quebra-cabeça loop for que funciona em conjunto para estabelecer uma repetição 
JavaScript. 


Inicialização O 
Inicia o loop com o Teste de condição O É Ação O 
contador, x, em 0. Só realiza um outro ciclo de loop Ç 


Chama a função 
takeStep() para dar 
um passo. 


se o teste avaliar como true, ou 


=0 ` 
var * seja, se x for menor que 37. 


x< 37 37 ciclos takestep() 


Atualização O 
Atualiza o contador de 
loop adicionando 1 a x. 


x++ 
Aumenta x 7 da mesma 
N forma que x= x+ f. 
cpa sido 
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Disseque o loop for 


Todos os loops for se atêm a um formato consistente que exige locais 
específicos para cada um dos quatro componentes. A boa notícia é que 
há muita flexibilidade na personalização de seus próprios loops usando 
este formato. 


Atualização do controle 


Todos os loops for de loop, gue normalmente 


ENER COB é RANPE Cdi iga de inicialização aumenta ou diminvi uma 
chave for. ge normalmente define variavel do contador, 
| a aig de loops. 


SD = 


zJ 
E= E giê 


Teste de condição, que 


a 
| no final resulta em Parêmteses se 
um valor Arve/ false, abrangem as 
Ai di partes Init, Test 
que di ser repetida, gue A a E Update dá ladps 
éuma instrução simples Po ro-e-virgula e 
Cov composta), necessário apos o 
codigo de inicialização e 
PEISH de condição, 


Termine o código que avisa ao usuário para digitar primeiro um número maior 
que 0 e, em seguida, use esse número como uma contagem inicial de um loop 
E for que realiza a contagem regressiva de um rolo de filme antigo (4, 3, 2,1, 
Exercicio Rodando). Além disso, confirme se o número é realmente maior que 0, antes 
de realizar a contagem regressiva. 


Avis 


Har um número, 


as usuário para 


V 


var count = prompt (“Digite um número maior que 0:”, “10”); 
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solução do exercício 


Termine o código que avisa ao usuário para digitar primeiro um número 
maior que 0 e, em seguida, use esse número como uma contagem inicial de 
sico do um loop for que realiza a contagem regressiva de um rolo de filme antigo 
Exercicio (4, 3, 2, 1, Rodando!). Além disso, confirme se o número é realmente maior 
que 0, antes de realizar a contagem regressiva. 


+ a EAR 
Armazena o número em Avisa ao usuário Contagem 
7 


Certifica- É $ diario 
Seega uma variavel coumt. para digitanum  nesnessiya em /. 
7 


numero, 
countè 


maiar gue 


var count = prompt (“Digite um número maior que 0:” 


Diminvi o 
contador 


Foda vi 
a gi 
gre termina 


o loop, 


Mestra a 


e 


Mandango: um localizador macho de 


poltronas de cinema 


A contagem regressiva de rolos de filme não é apenas uma 
maneira que os loops JavaScript podem ser aplicados aos 
filmes. Como você deve saber, a maioria dos machos querem 
um lugar vazio entre os que estão ocupados quando assistem a 
um filme juntos, Esse conhecimento levou Seth e Jason a criar 
Mandango, o localizador macho de poltronas de cinema. 


z de deixar! 
Eu amo você, cara, mas ii 


preciso de espaço. 


> dason 


A idéia é permitir que os amigos machos comprem 
poltronas de cinema em grupos de três, assim haverá sempre 
uma poltrona entre eles. O problema é, Seth e Jason não 
descobriram como fazer isso funciona... ainda. 
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Primeiro, verifique a disponibilidade de poltronas 


$ a 
O desafio que os rapazes enfrentam é o de serem capazes de pesquisar cada Todas as +res 
poltrona em uma fileira, verificando uma sequência de três poltronas disponíveis. poltronas 

7 


disponiveis! 
sns vo Todas as três / 
MEEN j I+, j 
vz ~ poltrona potes NA 
disponivel. ocupadas. 


Legal! 

Uma grande quantidade de 
machos na sala de projeção 
significa três poltronas 
maior de “masculinidade”. disponíveis em uma fileira 


Não é legal. 
Qualquer outra poltrona que 
não as três juntas disponíveis 


resulta em uma carência 


à o seu Lápis 
À, Usando a fileira de poltronas de cinema abaixo, escreva 
como você pesquisaria três poltronas disponíveis em uma 

fileira, usando o loop for. Certifique-se de formular como 
exatamente o loop fanciona em relação às poltronas. 
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solução inteligente 


Aponte seu Lápis 
a Solução 


Usando a fileira de poltronas de cinema abaixo, escreva 


como você pesquisaria três poltronas disponíveis em uma 
fileira, usando o loop for. Certifique-se de formular como 
exatamente o loop funciona em relação às poltronas. 


loop pelas > 
poltronas. ga a loop € 
meamna o pa 
V ( 
false true false true true rue false false false 


= 


Rh Rio o 
E T Três em uma 
Poltrona 


| 
Poltrona Apenas uma fileira, legal! 


ocupada, poltrona livre, ocupada, 


Execução de loop, HTML e disponibilidade de poltronas 


O projeto geral do Mandango faz sentido, mas não é bem claro sobre como 


a disponibilidade de cada poltrona se converte em código HTML. Cada poltrona 
f 
de cinema e 
Š vm m é e” /: isvalis 
id=”seat1” src="seat unavail.png” alt="Unavailable visualizada 


src="seat avail.png” alt="Available” /> 

E Unavailable” 

ide"seat4” vail.png” alt="Available” /> Mandanço como 

ide"se s g E i 

"seat5" src="seat_avail.png” alt="Available” /> uma imagem, 
src="seat avail.png” alt="Available” /> 

id="seat7” "seat unavail.png” al "Unavailable 

id-"seat6” src="seat_avail.png” alt="Available” />, 

ide"seat9” src="seat unavail.png” alt="Unavailable 


na pagina do 


Você não só precisa ser capaz de executar um loop pelos 
O HTUL completo e as imagens deste elementos de imagem HTML, como também precisa de 
exemplo estão disponiveis em www, uma forma de armazenar suas disponibilidades como 
alaks pombo variáveis booleanas no código JavaScript. 
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Poltronas de cinema como variáveis f 


Antes mesmo de pensar em executar um loop pelas poltronas pesquisando a disponibilidade, você 
precisa representar a disponibilidade de cada poltrona em código JavaScript. A disponibilidade de 
uma fileira de nove poltronas pode ser representada por nove variáveis booleanas. 


ger sed amtasi; A disponibilidade de cada 
1 


var seat2 = true; poltrona e armazenada 
como uma booleana, 

var seat3 = false; 

var seat4 = true; 


True significa gue 

/ 

var seat5 = true; << uma poltrona esta 
7 


ê, k dispomvel, 
var seat6 = true; Então eu preciso de uma forma 


de usar o mesmo nome de variável 


var seat7 = false; para executar um loop pelos vários 


False fragmentos de dados? Parece 
var seat8 = false; A Significa gue divertido... esqueça! 
var seat9 = false; uma poltrona não 

esta disponivel. 

Es > 
Agora, você está pronto para criar um loop for que executa um loop o 


por essas nove poltronas, verificando se existem três disponíveis em 
uma fileira, 


for (var i = 0; i < 10; i++) { 


if (seatl) Am 
Big mes Vace não pode mudar 
A 
... um nome de variavel 
} Hoda vez gue 


Fermina o loop! 
Espere, isso parece ser um problema. O loop for precisa 
ser capaz de verificar o valor de uma variável de poltrona 
diferente toda vez que termina o loop. Mas não há uma 
maneira de fazer isso, já que cada variável possui um 
nome diferente. 


Poder do 
érebro 


Se as variáveis individuais não funcionarem bem nos loops, como você 
poderia armazenar as informações de modo a executarem um loop? 
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um array de dados 


Os arrays coletam vários fragmentos de dados - 


O JavaScript permite armazenar vários fragmentos de dados em uma única 
variável com um tipo especial de dados chamado array. Uma variável de 
array é como uma variável normal, já que ela só tem um nome, mas um 

array possui vários locais de armazenamento. Pense em um array como um 
cubículo de armazenamento em sua casa — é um equipamento individual com 
vários locais de armazenamento. 


Cada item em um array consiste em dois fragmentos de informações: um 
valor e uma chave única que é usada para acessar o valor. As chaves são 
frequentemente números que iniciam em zero e contam cada item. As chaves 
numéricas são conhecidas como índices, tornando-se um array indexado: 


4 
Ésse array contem 
cinco fragmentos 


de informações 
distintos. 
E — 


7 
Os indices de array iniciam 


em O e contam cada item, 


TA E 
Chave numérica, ov indice, 
usada para acessar um valor, 
Criar um array é semelhante a criar uma variável normal, exceto se tiver que informar 


ao JavaScript que você precisa de um array, ao contrário de uma única unidade de 
armazenamento. De fato, você está dizendo ao JavaScript para criar um objeto. 


var showTime = new Array() Ésse é um novo objeto 


do tipo Prrag, 


O nome da 
1 
variavel de 


die Não se preocupe com o fato de que um array é na 


verdade um objeto. 


Cria um nova 


objeto de array. 


Para suas finalidades imediatas, não importa 
muito se um array é realmente um objeto. Você 
aprenderá muito sobre objetos nos Capítulos 9 e 
10 e. nesse caso, essa coisa de objeto se resolverá 
naturalmente. 
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Os valores de Array são armazenados em chaves 


Objeto ou não, uma vez criado um array você pode começar a adicionar e acessar 
os dados nele. A chave para se obter os dados armazenados em um array é, bem, a 
chave! A chave específica associada ao fragmento de dados é o que você usa para 
acessar esses dados. No caso de um array indexado, usa-se somente o índice do 


i O valor a ser 
elemento de array que deseja acessar. : ý 


armazenado no 


Vs Sa pm 
oii showTime[0] = "12:30"; 
O nome da 


1 

variavel de VAR 

array, indice do valor 
de array demtro 
de colchetes. 


Esse código define o primeiro valor do array showTime para uma hora do dia. Se e 
não quiser definir cada valor de um atray marmlsiente, atri de cada vez, você pode: -OE fadas 
inicializar o array inteiro quando for criá-lo. os valores 


A fd 
Separados por 
virgulas, 


var showTime = [ “12:30”, “2:45”, “5:00”, “7:15”, “9:30” ]; 


A primeira E eaen t 
parte da Certifica-se de incluir a 


criação do lista de valores de arra £ lembre-se do 
E começa dentro de colchetes. pombe-e-vingula, 
igual, 


Espere um minuto, esse código não envolve toda essa coisa de objeto. O que 

aconteceu? Esse código evita a criação formal de um objeto vazio prosseguindo e P 
construindo um array (objeto) a partir de valores que ele contém. Liste todos os Pe egve o ultimo 
elementos contidos no array dentro de colchetes. Com o array preenchido com yalar no array, 
dados, você está pronto para usá-lo! 


alert (“O último filme começa às “ + showTime[4] + “.”); 


Os arrays armazenam ( The late movie starts at 9:30. 
vários fragmentos de dados 


em um único lugar. 
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array exposto 


Arrays Expostos 


Entrevista desta semana: 
Dentro da mente de um armazenador de dados serial 


Use a Cabeça: Prazer em conhecê-lo, Array. 
Ouvi dizer que você é ótimo em armazenar 


vários fragmentos de dados. 


Array: É verdade. Volume é a minha essência. 
Você precisa de um lugar para armazenar 50 
strings de texto ou 300 números? Sou o cara. 


Use a Cabeça: Parece interessante. Mas as 
pessoas não podem armazenar quantidades de 
dados em variáveis normais? 


Array: Claro, e as pessoas também podem ir 
trabalhar descalças, se quiserem. Olha, existe 
sempre mais de uma mancira de fazer as 
coisas. Neste caso, eu forneço uma maneira de 
armazenar vários fragmentos de informação 
melhor do que as variáveis normais. 


Use a Cabeça: Bem, eu prefiro calçar sapatos 
para trabalhar. Mas no que exatamente você é 
melhor? 


Array: Pense dessa forma. Se você está 
mantendo um diário e escreve alguma coisa todos 
os dias, como acompanha todas essas páginas 


após alguns anos? 


Use a Cabeça: As páginas estão todas lá no 
diário. E daí? 


Array: Você está partindo do pressuposto de que 
as páginas estão sendo organizadas junto com 
algum senso de conectividade. E se elas forem 
apenas um bando de bilhetes jogados em uma 
caixa de sapatos? Esse diário, de repente, ficaria 
muito mais difícil de se gerenciar. 


Use a Cabeça: Certo, armazenar dados em um 
array é como manter as páginas de um diário em 
um livro? 


Array: Eu organizo os dados de uma maneira 
muito fácil de acessar. Por exemplo, se eu 
pergunto o que você escreveu no diário no último 
dia 6 de junho, provavelmente você me diria para 
voltar à página 124. A mesma coisa acontece com 
os dados de array, exceto os números de páginas 
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de um array que são chamados de chaves. 


Use a Cabeça: Já ouvi falar em índices de array, 
mas não em chaves. O que é uma chave? 


Array: Ah, desculpe. Chave é o termo geral 
usado para descrever um fragmento de 
informação usado para procurar um fragmento 
de dados. Índice é apenas um certo tipo de chave, 
uma chave numérica. Portanto, os números das 
páginas do diário não são somente chaves, elas 
também são índices. Se você estiver falando de 
procurar dados com números, chaves e índices 
específicos realmente são a mesma coisa. 


Use a Cabeça: Entendi. Acho que a única coisa 
que ainda não entendi é o que tudo isso tem a ver 
com a execução de um loop? 


Array: Bem, não necessariamente tudo. Sou, 
bastante útil para armazenar dados sem que os 
loops entrem na jogada. No entanto, eu os torno 
incrivelmente úteis para que eles percorram o 
ciclo por um bocado de dados. 


Use a Cabeça: Como assim? 


Array: Lembre-se de que os loops usam 
contadores númericos com frequência para 
controlar a execução do loop, certo? Use o 
contador como índice dentro de um array e voila! 
Agora você possui uma maneira de percorrer 

o ciclo por todos os dados que armazenei 
separadamente. 


Use a Cabeça: Espere, você está dizendo que as 
pessoas podem usar um contador de loop como 
um índice de array para procurar dados? 


Array: É exatamente isso que estou dizendo. 
Use a Cabeça: Isso é extremamente eficiente! 


Array: Pois é. Essa é a razão pela qual os scripts 
que precisam executar um loop pelos dados me 
acham indispensável. Com apenas algumas linhas 
de código, você pode executar um loop por um 
array de dados inteiro. É realmente muito legal. 


Aponte seu Lápis 


looping 


Escreva um código para criar um array de poltronas para o Mandango 
e, em seguida, execute um loop pelas poltronas no array, alertando o 
usuário sobre a disponibilidade de cada poltrona. 


F: Existe a possibilidade de 
um loop for nunca parar de 
executar um loop? 


R: Ah, sim. O temor do loop infinito. 
Claro, existe a possibilidade de se criar 
um loop que nunca existiu, destinado 

a percorrer um ciclo continuamente 

até os limites de tempo e espaço... ou, 
pelo menos, até que você recarregue a 
página da web. Loops infinitos não são 
considerados uma coisa boa, porque 
eles evitam que o seu script faça algo 
mais — é o equivalente JavaScript 

de uma aplicação travada. Pense na 
tela azul do Windows, só que não tão 
ameaçadora. 


Os loops infinitos ocorrem quando 
um contador de loop não atualiza de 
maneira adequada ou quando, ao 
contrário, nunca se altera provocando 
um resultado de valor fal se para o 
teste de condição do loop. Sabendo 
disso, você sempre deve verificar à 
risca, duas ou três vezes, o teste de 
condição e atualizar a lógica em seus 
loops for. Ah, e você saberá que 
tem um loop infinito em suas mãos 
quando seu script estiver inativo, sem 
aparentemente fazer nada. 


Não existem 
Perguntas idiotas 


ja É possivel usar uma 
instrução composta como 
parte da ação de um loop for? 


R: Sem dúvida! Na verdade em tudo, 
exceto no mais simples dos cenários de 
execução de loop, você precisará usar 
uma instrução composta. Isso porque 
os loops mais úteis acabam precisando 
executar um loop em mais de uma 
instrução. 


P: Quando os testes de 

condição de loop resultam em 
false, a parte da ação do loop 
executa mais uma última vez? 


R: Não. A parte da ação de um loop 
for só executa se o teste de condição 
resultar em t rue. Uma vez que o teste 
de condição resulte em fal se, o loop 
imediatamente sai sem nenhum outro 
código executando. 


Ẹ: Os arrays indexados 
sempre começam sua 
indexação com 0? 


R: Sim e não. Por padrão, todos 
os arrays indexados começam em 0. 
No entanto, você pode substituir esse 


comportamento e definir chaves 
numėricas para quaisquer valores de 
número que você queira, embora não 
seja convencional. Não façã isso, a 
menos que haja uma boa decisão 

de planejamento para não usar os 
Índices baseados em zero... é um 
comportamento não-convencional e 
pode provocar confusão. 


E: Os dados armazenados 
em um array têm sempre 
que ser do mesmo tipo? 


R: ão, de modo algum. Para fins 
de execução de loop, é importante 
que os dados de array sejam do 
mesmo tipo, porque a idéia é 
executar um loop por um conjunto de 
dados semelhantes. Por exemplo, 

se quiser executar um loop por um 
array de notas para calcular uma 
média, não faria muito sentido 

que algumas ocorrências fossem 
booleanas - neste caso, elas todas 
devem ser números. Então, embora 
arrays possam conter valores de 
tipos diferentes, é uma boa idéia 
armazenar dados de mesmo tipo nos 
arrays, especialmente quando você 
está armazenando um conjunto de 
dados semelhantes. 
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solução inteligente 
aponte seu Lápis 
Solução 


7 4 
uk que os indices de 
dio começam em 0, 


Escreva um código para criar um array de poltronas para 
o Mandango e, em seguida, execute um loop pelas poltronas 
no array, alertando o usuário sobre a disponibilidade de cada 
poltrona. 


o cortador de lo 
DaKa SER wA Cria e inicializa o array a A Aumenta o 
p de poltronas com valores de array comador de loop 
valores booleanos, com virgulas, desde que ele 
Embora você esteja contando, 


pos. sa ter 
usado à 
númera 9 aqui, for (var = 0; à < sente Length; 1H) (ii. ci iiiiisrrisinariiios 
a propriedad: 
deextensão if (seats[i]) 
do objeto de 
array € ainda 
melkar, Éle é 
melhor porque 
funciona 
mesmo SE a 
número de 
poltronas no 
arre mudar 
em algum Exibe um alerta diferente 
momento, baseado na disponibilidade (rve) EK 
ou não Cfalse) da poltrona, 


Seat O is not available. 


combador de loop É usado coma um indice de Seat Lis available. 
array para percorrer Hodas os valores de 


per Es 
Qy Pontos de Bata 


= Embora um array contenha vários 


= Loops for repetem um fragmento de fragmentos de informação, ele possui um 
código JavaScript um certo número de único nome de variável. 
vezes. 


= Arrays indexados são acessados através de 
= Os operadores de incremento (++) e chaves numéricas chamadas índices. 
diminuição (--) fornecem uma forma 


eis tias atos contadoreside loop, AEEA 


loops porque eles permitem o uso de um 
= Um array permite armazenar vários contador de loop para executar um loop 
fragmentos de dados em um único lugar. pelos dados de array. 
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Do JavaScript ao HTML 


A disponibilidade de poltronas no Mandango é representada por um array booleano. 
Então, o próximo passo é converter esse array em imagens HTML (disponíveis em 
http) | wumheadfirstiabs.com/ books/ hfs/) que reflitam a disponibilidade de poltronas na 
página da Web do Mandango. 


var seats = [ false, true, false, true, true, true, false, true, false ]; 


Find Seat 


Embora pareça perfeito, não há nenhum código que mapeie o array booleano para 
visualizar as imagens das poltronas na página da web. Agora, esse é o problema. 


Poder do 
cérebro 


Como você poderia fazer a conexão entre o array de disponibilidade de poltronas 
em JavaScript e as imagens das poltronas na página do Mandango? 
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eu vejo... uma poltrona 


Como visualizar as poltronas do Mandango “55: itzen de pottrona 


se aplica 2 pesquisa de 
poltronas do Handango, 
Brando as marcações de 


Para ligar o array JavaScript às imagens HTML, certifique-se primeiro 
de que as imagens estejam expostas de forma acessível, e depois 
determine quais imagens serão usadas para representar os diferentes 


stits da politôna. Vamos cuidar peimeito da-última tarefa. poltronas estão realçadas, 
Disponivel 4r: Marcação 
l P e esta ocupada. 


N Indisponível 


J seat_avail.png 


/ seat select.png 


f 
I 7 7 
A poltrona esta disponivel! Soal uaaal, E 


Essas imagens de poltronas são atribuídas ao atributo src de cada imagem N 
HTML de poltrona para definir as imagens que aparecem na página. ) 


as 


fsse IDé pe] 


eríticomo <img id="seat8' src="seat unavail.png” alt="Unavailable" /> 
mapeamento A 
de array para 


à O desafio então se torna a execução de um loop através do array booleano 
as imagens de 


ao definir a imagem da poltrona para cada tag HTML <img> na página. 
Os passos necessários para essa tarefa são surpreendentemente semelhantes 
deve começar em a como executamos anteriormente um loop pelos arrays de poltrona. De 

O e terminar em fato, a única diferença concreta reside na ação do loop. 

8, assim como os & 


7 
indices de array, 


poltrona — ele 


Inicializa a variável do contador i em O. 


(2) Verifica se i é menor que a extensão do array (9), Se for, prossegue 


5 
f com o Passo 3 e continua o ciclo até terminar o loop. Se não for, encerra o 
loop. 
9 ciclos \ (3) Executa o código de ação do loop, que neste caso define a imagem da 
| poltrona. 


(4) Aumenta i e volta para o Passo 2, possivelmente para um outro ciclo 
de loop. 
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A inicialização da poltrona no Mandango ocorre na função 

initSeats (), que executa o mapeamento do array 

JavaScript até as imagens HTML da poltrona usando um A inicializa ção realizada por 

loop de inicialização de poltrona. imASeatsO envolve a deki inição 
a da aparência das imagens da 

o cortador de loop começa O Feste de condição poltrona de cinema na pagã a 


a efe a 3 
em Dja gue o se 2.0 aca za ge é diferente da etapa de 
indexado começa em executado um loop em inieialiga ção em um loop for 


Hodas as poltronas, e 
function e t 


/i Inicializafa PENA de rodas as poltronas Aumenta o contador 


for (var i = 0; i < seats.length; i++) ( o 

if (seats[i]) | IN de loop. 
“4 fine a poltrona como disponível 
document .getElementById ("seat" + i).sre = "seat avail.png"; 
docjfment .getElementById("seat" + i).alt = "Available seat"; 

} 

else 1 
4 Deñne a poltrona como indisponível E 
document. getElementById("seat" + 1).src = "seat unavail.png"; 
document .getElementById("seat" + 1) .alt = "Unavailable seat"; 


k 


O T) da imagem da Se o valor da poltrona 
Se o valor de poltrona for poltrona € criada a for false, define a imagem 
+rve, define a poltrona partir do contador HTL da poltrona como 


onivel. (5) 


como disponivel. O de loop Foda vez que 
Hermina a loop, 5) 


<body onload="initseats (); "> 
<div style="margin-top:7 
<img id="searor s. 
<img id="seari" 
<img id="seat2n 
<img id="sear3" 


75px; text-align:centerrs 
alt="m /> 
a Os atributos srce 


j> alt são dinamicamente 


i " 7> oie 

ze TE seara” 73 modificados a cada 
mg id="seatsm 

AA ig /> imagem de poltrona. 


4» 
1» 
/><br /> 


<img id="seat7" 
<img id="seatgn 
</div> 
</body> 
</html> 
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as variáveis da pesquisa de poltrona 


Pesquisa de poltronas não tão masculinas 


Com as poltronas inicializadas, agora é possível prosseguir com a 
pesquisa de poltronas, que é realmente o objetivo do Mandango. 
Seth e Jason determinaram que seria melhor fazer com que o 
script procure primeiro por poltronas individuais antes de começar 
as futuras pesquisas das três poltronas. Isso simplifica a tarefa 
imediata, permitindo criar a aplicação de forma progressiva. 


Já que eles querem pesquisar por uma poltrona individual 
disponível, a primeira coisa que o script vai precisar é de uma 
variável para rastrear a seleção da poltrona. 


Variável global, que significa estar 


— > acessivel em Lodo o seript, ———3 


selseat aa 
Essa variável armazena a marcação da poltrona e precisa estar por perto durante [| 


a vida do script, o que significa que ela deve ser uma variável global. Então, a 
função findSeat (), que manipula a tarefa de encontrar uma poltrona para 
o usuário, contará com a variável selSeat para armazenar o índice da 

poltrona marcada. 


A variável selSeat faz 
sentido, mas qual valor indica 
uma poltrona desmarcada? 


Seth traz uma boa pergunta. A variável selSeat armazena a marcação de 
poltrona, que se encontra no intervalo de O a 8, assim que ela tiver sido marcada. 
Mas você também precisa saber se um usuário ainda não escolheu uma poltrona. 
A Um valor especial pode indicar esse estado de não-marcação, que pode ser 
ji observado como -1 (nenhuma poltrona marcada ainda). Então, selSeat 
realmente precisa começar inicializado como -1. 


, 4 var selSeat = -1; 
À variavel sei Seat agora e 


inicialigada como -/, de modo 
gue o script começa sem 
nenhuma poltrona marcada, 


Com a variável de marcação de poltrona funcionando, estamos prontos 
para montar a função findSeat (). findSeat () pesquisará cada 
poltrona no array de poltronas, encontrará poltronas disponíveis e, em 
seguida, avisará o usuário para aceitar ou rejeitar cada poltrona disponível. 
Embora seja verdade que os machos não ficarão felizes com essa versão 
inicial do Mandango, é um passo na direção certa! 
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A função findSeat () do o é onde o usuário procura por uma poltrona 
A finds do Mandang di 
e o us 
disponível e, em seguida, confirma ou nega quaisquer poltronas que sejam 
encon s. Ajude Seth e Jason a terminar o código que A 
tradas. Ajude Seth ter que falta com os imãs. 


function findseat O { 
71 Se a poltrona já estiver marcada, reinicializa todas as poltronas para removê- 


/i Pesquisa por todas as disponibilidades de poltronas 
e varii e Op à < seata. lengthy ol 
E Verifica se a poltrona atual está disponível 


if tus 4 
7} beine a marcação da poltrona e atualiza sua aparência 


document -getElementById ("seat" +). reren = "seat select.png 


document .getElementById ("seat” + È- “your seat"; 


JI Avisa o usuário para aceitar a poltrona 


«E eaei bt Sbt 4) À « is available. Accept?"); 


EE (opecennes E 
i o asuário rejeitou a poltrona. então desfaz a marcação e continua 
procurando 


= 1; 


document -getElementById("seat” + 1. = “seat avail.png" 


document -getElementById ("seat” +i). = "available seat"; 
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solução imãs Javascript 


í Ea Imãs de geladeira JavaScript Solução 


A função findseat () di le o usuário procura por uma poltrona 
çi lo Mandango é ond: á 
E à 
disponível e, em seguida, confirma ou nega quaisquer poltronas que sejam 
encon! . Ajude Seth e Jason a terminar o código que falta com os i 
tradas. Aj imãs. 


function findseat() | 
/! Se a poltrona já estiver marcada, reinicializa t 


< Se sel Seat for diferente 


de A começa uma nova busca 


- 
| 


0; i 
a mais de poltrona, ja pres 


vê-las 


odas as poltronas para remo 


maioria dos usuarios começa al 


numeração em (em vez de o. 
j! pesquisa per todas as disponibilidades de poltronas 
for (var i= 0: i< seats.length; i++) t 
44 verifica se a poltrona atual está disponível Se a polt, r 
poltrona estiver dis, 
pomvel, 
b 


seats [i] será true, 


pl 
DONS cação da poltrona € atualiza sua aparência 


“seat select.png"; 


document .getElementById("seat” + TA Ga 
e 
document. getElementByld("sedt" + ir- ~ |+ "rour seat"; 


44 avisa o usuário para aceitar à poltrona 


confim('Seat " + t+ + » is available. Accept?2"); 


MM jeitou a poltrona, então desfaz a marcação e continua procurando 


polfrona document .getElementById ("seat" EE STA G nseat avail.p 


alt 


- vavailable seat"; 


ocúment -getElementayTa ("seat + 1). 
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Test-drive: o localizador de poltronas individuais 


A versão do Mandango de pesquisa por poltronas individuais usa o loop for e um 
array para permitir que o usuário pesquise poltronas individuais disponíveis. Não é 
muito para homens, mas é funcional... 


enn Mandango - The Macho Mowe Tichet fer o 


7 
O usvaria clica em 
Cancelar para rejeitar a 
marcação da Ptrona 2. 


A Poltrona Yeski 


dispomvel, aceita? 


R A Poltrona 4 está disponível. Aceita? 


( Cancel | = 
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loop do loop do loop. 


Uma coisa boa demais: loops intermináveis 


Embora a busca por poltronas individuais do Mandango tecnicamente funcione 
para descobrir uma poltrona individual que esteja disponível, há um problema com 
o loop que ele não sabe quando parar. Mesmo após o usuário aceitar uma poltrona, 
clicando em OK, o script se mantém em loop pelas outras poltronas disponíveis. 


A Poltrona ii 
so end = Po 


jé foi 


aceita, mas E à 
o Mandango A — 4 # F 
continua j | 5 

nisi ra) 


procurando 


=. 


A Poltrona 4 está disponível. Aceita? 


por mais 
poltronas. 


Th, isso não é bom. A idéia 
principal falha, se você tiver 
que procurar por cada poltrona. 


A Poltrona 8 está disponível. Aceita? 
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Os loops sempre precisam de uma condição de saída (ou duas!) 


Já que a fanática busca por poltronas parece ser causada pelo loop que não termina nunca, Jason 
acha apropriado uma observação atenta ao loop for na função findSeat (). 


A função confirm avisa o usuário 
para responder uma pergunta simf não, 
retornando true Csim) ou false (não), 


for (var i = 0; i < seats.length; i++) i 
// verifica se a poltrona atual está disponível 
if (seats[i)) ( 

// Define a marcação d: 
selseat = i; 
document .getElemenyById("seat" + ij.src = "seat_select.png"; 
document . getElemerftById ("seat" + i).alt = "your seat"; 


oltrona e atualiza selSeat 


Avisa o a io aceitar a poltrona 
= cenfirm("Seat " + (i + 1) + " is available. Accept?"); 


jeitou a poltrona, então desfaz a marcação e continua procurando 


document .getElementById ("seat" + 1).alt = "Available seat"; 


a E es 


” / 


Ésseto codiza sue é 
executado guando o 
usuario NÃO aceita uma 
poltrona disponivel, 


document .getElementById("seat" + i).src = "seat avail.png"; ASS 


z 
Se a usuario acertar uma 
fi 
poltrona disponivel, nada 
acontece e s loop comtinva 
apenas o seu trabalho, 


Então, quando o usuário clica em Cancelar para rejeitar a poltrona, a 
variável selSeat é definida como -1 (nenhuma marcação) e o loop 
continua. No entanto, não há nenhum código para quando o usuário 
aceitar uma poltrona. Isso é bom, desde que ele permita que a variável 
selSeat se lembre da poltrona atual, mas não há nada que evite o 
loop de continuar procurando por poltronas. 


Poder do 
cérebro 


O que precisa acontecer quando o usuário clica no botão OK 
para aceitar a poltrona atual? 
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hora do intervalo 


Um “break” na ação 


O problema com o código do Mandango é que você precisa tirar o loop do 
impasse, antes que o usuário aceite a poltrona. Um possível ajuste é enganar o loop 
for atribuindo ao contador um valor maior que a extensão do array. 


Issa finaliza o loop forçando a falha do 
“a =, af ; 
+ mento Lengua + di Heste de condição... mas há uma maneira 


7 
melhor de forçar o Fermina dos loops. 


Embora esse código tenha uma alteração um pouco mais inteligente que conclui 

a tarefa, existe uma maneira melhor de enganar a condição de loop que não 
envolve embromação com o contador de loop. A instrução break foi criada 
especificamente para escapar de uma seção de código, inclusive do código de loop. 


-> break; 


Sar imediatamente 
de um loop, não paria E 
para Avançar, não 


cobra B200. 


Quando o loop encontra a instrução break, ele finaliza imediatamente, ignorando 
completamente o teste de condição. Então, a instrução break oferece uma 
maneira prática de sait imediatamente de um loop, sem fazer perguntas. ~ 


” 


A instrução cont inue está intimamente relacionada à break, a qual tira o ciclo 
atual de loop do impasse, mas não sai dele, Em outras palavras, você pode usar 
continue para forçar o loop a saltar para o próximo ciclo. 


Salta do ciclo aval 


de loop, combinvando ~ g 
no proximo, ~> continue; 


Saquei essa da instrução break. 
Ela vai se livrar de todos os 
loops desnecessários. 


Tanto break como continue são 
extremamente úteis no controle de ajuste A 
dos loops, mas break oferece uma solução i 
para os problemas imediatos de Seth e Jason 
em relação ao looping do Mandango. 
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Não existem 
Perguntas idiotas 


F: O resto do código de ação em um loop corre o risco de introduzir bugs diferentes. Em 
for finaliza o ciclo atual quando a instrução vez de contar pelos elementos de array como 
break é usada? é o esperado, você está forçando o contador a 
um valor artificial para além da faixa do array 
R: Não. Ainstrução break força uma finalização apenas para finalizar o loop. Em geral, você 
imediata do loop, impedindo completamente o precisa confiar que a parte de atualização do 
fluxo normal dele. loop é o único lugar onde o contador de loop 
se modifica. Existem sempre casos especiais 
E Por que embromar o contador do loop que surgem onde truques são permitidos, 
para forçar o loop a sair não é uma boa mas este não é um deles — a instrução break 
idéia? manipula admiravelmente a saída do loop e 
sem nenhuma confusão em relação ao que 
R: Porque você não está usando o contador está acontecendo. 
de loop com essa intenção, e dessa maneira 


eofponto seu Lápis 


`A 
O loop for na função findSeat () do Mandango precisa de alguma 


ajuda quando um usuário aceita uma poltrona. Escreva as linhas que 
faltam no código que manipula a saída do loop, certificando-se de 
incluir um comentário para explicar como o código funciona. 


j Rasquisá por todas as disponibilidades de poltronas 


i < seats.length; i++) { 
1 está disponivel 


tor (var i = 0; 
/i Verifica se a poltrona atua 
if iseats[i]} ( 

// Define a mai 


selseat = i; E 
document .getElementById("seat" + 1) -sEc 


document .getElementById("seat" + 1) alt 


cação da poltrona e atualiza sua aparência 


seat select.png 


= "Your seat"; 


47 Avisa o usuário para aceitar ê poltrona 


+ isponível, aceita?")1 
dar accept = confirm(*a Poltrona * + (1 + 1) + “esté aisponível 


O usuário rejeitou a poltrona, então desfaz à marcação e continua procurando 
jj O usuá: j ltrona, er 
11 


selseat = -1; $ y 
document .getElementById("seat” + 1).src = use atear 
document -getElementayId("seat" + i)-alt = “Available asso 


você está aqui» 213 


solução inteligente 


aponte seu Lápis 


à Solução 


O loop for na função findSeat () do Mandango precisa de alguma 
ajuda quando um usuário aceita uma poltrona. Escreva as linhas que 
faltam no código que manipula a saída do loop, certificando-se de 
incluir um comentário para explicar como o código funciona. 


;/ pesquisa por todas as disponibilidades de poltronas 


for (var i = 0; i < seats.length; i++) ( 
4) verifica se a poltrona atual está disponível 

if (seats[il) { 
Ji Define a marcação da poltri 


ona e atualiza sua aparência 


selSeat = i; . te 
document .getElesantayId("sest” + 1) src = "seat select pao? 
document .getElementByTd ("seat" + 1) alt = "Your seat"; 


ji Avisa o usuário para aceitar a poltrona 


var accept = confirm(“A Poltrona “ + (i + D 


+ “está disponível, aceita?) 


so we're done 


HT inua curando 
A usuário rejeitos a poltrona, então desfaz a narcação e continua procu nde 
selSeat = -l; 


document .getElementById("seat” + il.src = “seat avail png”; 
document getElementByTd( "seat" + 1).alt = "Available seat"; 


Colocando ‘man’ em Mandango 


A intenção original do Mandango é permitir aos usuários a pesquisa de 
poltronas de cinema disponíveis em grupos de três. Agora, com a pesquisa 
por poltronas individuais funcionando, Seth e Jason estão prontos para 
voltar suas atenções para uma pesquisa verdadeiramente de macho. Eles 
precisam de uma maneira de verificar uma sequência de três 
poltronas disponíveis. 


a / 
Tres poltronas dispomveis em 


uma fileira... a 
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Não existem 


P: Ainda não entendi a diferença entre um 
operador booleano normal e um operador 
de lógica booleana. Qual é? 


R: Bem, antes de tudo, eles todos são 
operadores booleanos, o que significa que eles 
sempre resultam em um valor booleano quando 
terminam suas tarefas. A única diferença é o tipo 
de dados em que eles operam. Os operadores 
booleanos normais funcionam em todos os tipos 
de dados, já que eles realizam comparações 
gerais, tais como “igual a”, “diferente de”, “maior 
que” etc. Os operadores de lógica booleana 
funcionam somente em dados booleanos e, 
portanto, realizam comparações lógicas como 
E, OU e NÃO. Então, os operadores de lógica 
booleana funcionam somente em informações 
true/false, enquanto os operadores booleanos 
normais funcionam em todos os tipos de 
dados. 


Perguntas idiotas 


P: Então, o operador NOT é um operador de 
lógica booleana? 


R: Sim. Ele opera somente em um valor 
booleano, então ele se qualifica como um 
operador de lógica booleana. Ele também é um 
operador unário já que ele opera em apenas um 
fragmento de dados. 


tê Como os parênteses funcionam em 
relação aos operadores booleanos? 


R: Os parênteses permitem alterar a ordem 
de avaliação padrão de todos os operadores, e 
não apenas os operadores booleanos. Agrupar 
um operador dentro de parênteses força a 
realização dessa operação antes das que 
estão em tomo dela. Então, largeDrink && 
largePopcorn é forçada para ocorrer antes 
da operação | | no código de balas gratuitas, 
porque ela aparece dentro de (). 


exfiponto seu Lápis 


a É a sexta vez que o loop for do Mandango circula (i = 5), 
e sua ajuda é necessária para determinar se há três poltronas 
consecutivas disponíveis, verificando a disponibilidade da 
poltrona e executando uma lógica booleana. 


for (var i = 0; i < seats.length; i++) { 


// Verifica 


a poltrona atual e as duas poltronas seguintes estão disponíveis 


if (seats[i] && seats[i + 1] && seats[i + 2]) { 
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solução inteligente 


«Aponte seu Lápis 


a Solução É a sexa vez que o loop for do Mandango circula G = 5), 
e sua ajuda é necessária para determinar se há três poltronas 
consecutivas disponíveis, verificando a disponibilidade da 


poltrona e executando uma lógica booleana. 


true false true 


pS r/e 14227 


for (var i = 0; i < seats.length; i++) ( 


/! Verifica se a poltrona atual e as duas poltronas seguinte: 
if (seats[i] 66 seats[i + 1] 56 seats[i + 2]) ( 


stão disponíveis 


Finalmente, um localizador de poltronas masculinas 


Agora, o Mandango pesquisa corretamente uma sequência com três poltronas 
disponíveis, resultando em um serviço de ingressos para cinema que até mesmo 
o mais durão dos durões apreciará. 


7 

O usvania foi avisado 

para aceitar uma oferta 
A 

de três poltronas. 


estao te Macho Mome Tr ad j 


/ 


Eai 
E O o eae 


( Cancel ) HOR) 
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De volta ao mapa do tesouro 


Com o Mandango temporariamente em boa forma, podemos retornar à busca do 
tesouro escondido. Lembra do mapa do tesouro? 


EE, ROA 
a 


O En seguida, 
ande até encontrar 
uma rocha em forma 


de pipoca. 
J 


O Primeiro, ande 
37 passos a leste. 


Um loop for A 
navegou pela = 
primeira parte 

do mapa com 
habilidade! 


[3] O X marca 
realmente o local! 


Um loop for funcionou bem na navegação da 
primeira parte do mapa. À segunda parte ainda 
permanece, e ela apresenta um desafio que não 
parece ser adequado às habilidades especiais de um 
loop for. É dificil configurar um contador de loop 
quando não há idéia de quantas repetições do loop 


são necessárias. 


IN 


N 
= O tesouro 


ainda espera... 


| Poder do 
cérebro 


Qual a diferença entre as duas partes da pesquisa 
sobre o mapa do tesouro? Como você criaria um loop 


para percorrer a segunda parte do mapa? 
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Todo esse papo de cinema me fez lembrar 
de pipoca... Ah, desculpe. Acho que algumas 
instruções if aninhadas poderiam eliminar 
essa pesquisa de três poltronas sem nenhum 
problema. Eis como eu faria! 


O código de perto 


Uma segt jência de três Se três poltronas em uma 
poltronas é verificada usando- fileira forem encontradas, 
se instruções i aninhadas, atribui a marcação à Psi 


for (var i = 0; à < seats.length; i++) ( 
Verifica se a poltrona atual e mais as dua: 
if (seats[i]) ( 
if (seats[i + 1]) | 
if (seats[i + 2]) ( 
ji Detine a marcação da poltrona e atualiza 


ltronas seguintes sétão disponíveis 


Atera todas as 
+rês poltronas para 
imagem marcada, de 


document .getEleme: + 1) src = “seat select. png"; 
document. getElementById ("seat" + 1).alt = "your seat"; forma que o usuario 
document. getElementById("seat" + (i + 1)).src = "seat select .pna"; 

document. getElementById( "seat" + (i + 1)).alt = "Your seat"; possa visualizar guais 
document ..getElementById (seat? + (i + 2)).sre = "seat select.png"; mA 
document .getElementById("seat" + (i + 2)).alt = "Your seat"; poltronas i 


disponiveis, 


44 Avisa o usuário para aceitar a poltrona 
var accept = confizm("Seats " + (i + 1) +" through " + (i +3) +" are available. Accept?"); 
if (accept) ( 
/1 O usuário aceitou a poltrona, então damos por encerrado 
break; 
1 
else | 
// O usuário rejeitou a poltrona, entāo desfaz a marcação e continua procurando 
selseat = -1; 
document .getElementById("seat" + 1).src = "seat avail.png” 
document .gerElementById("seat" + 1) alt = "available seat" 
document .gerElementById("seat" + (i + 1)).src = "seat avail.png"; 
document .getElementById("seat" + (i + 1)).alt = "Available seat", 
document. getElementById("sear" + (i + 2)).src = "seat avail.png” 
document .getElementById("seat" + (i + 2)).alt = "Available seat"; 


Fade + 4 


i * Lembrete: Esse codigo e Lados Se o usuário rejeitar 

, os codigos € imagens de exemplo do as poltronas, atribua 
Mandanço estão disponiveis em www. suas imagens de volta 

altabooks.combr, a dispomvel. 
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esperando e desejando elegância 


Não seria um sonho se houvesse 

uma maneira de combinar essas 

ifs aninhadas em algo um pouco 
mais elegante? 
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Uma solução lógica, elegante e bem-bolada com && 


Existe uma maneira melhor de manipular a verificação das três poltronas no 
Mandango. A versão da if aninhada funciona, mas há espaço para melhorias e a 
mudança envolve essencialmente a criação de um código mais elegante. 


Elegante!? Você está 
brincando? Ah, cara, 
essa é boal 


Apesar das objeções de Seth, há momentos que 
valem a pena fazer mudanças em seu código, 
fazendo com que ele fique mais “elegante”, que 
é uma outra forma de dizer que o código está 
limpo, eficiente e fácil de entender e manter. No 
caso das instruções if aninhadas, seria mais 
elegante uni-las dentro de uma única instrução 
if... mas como? 


O operador booleana 
AND compara dois 
valores Sooleanos para 
verificar se ambos são 
if (seats[i] && seats[i + 1] && seats[i + 2]) ( Le, 


de A 


} 


+rve +rve +rve 


O operador booleano AND (& &) compara dois valores 
booleanos para verificar se ambos são t rue. Neste 
código do Mandango, dois operadores AND são usados 
juntos para verificar se os três valores de poltronas são 
true. Se forem, você sabe que há uma seqüência com 
três poltronas disponíveis. Resolvido o problema... e 
com um pequeno toque de elegància! 
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a lógica booleana explorada 


A lógica do operador booleano revelada 


Você deve ter visto vários operadores de comparação, como == e <. A maioria 

dos operadores de comparação que já viu compara dois valores e produz um 

resultado booleano. Os operadores de lógica booleana também produzem Do: 

um resultado booleano, mas eles operam apenas nos valores booleanos — eles Você ja deve ter 
realizam comparações de lógica booleana. sikisi 


AND OR NOT 
asb a ilb a e 


) Í 


Tri or 
True se a AND b forem pg = False se a for true, 
E m 
true, se não false. nã io 3 +rve se a for false. 


Os operadores de lógica booleana podem ser combinados juntos 
para criar comparações lógicas mais interessantes, normalmente 
visando tomar decisões complexas. 


Os parênteses permitem agrupar 


a 4 
expressões de logica booleana, o 


E a 
N Z Voce pode ganhar balas de 
/ 


graça comprando um combo 
if ((largeDrink && largePopcorn) || coupon) 


OU comprando um cupom, 
freeCandy () ; Ci à 


Neste exemplo, um operador AND é usado para 
selecionar uma bebida grande e uma pipoca grande... o > 
peradores de lógica 


combo! Você ganha balas de graça com um combo. 
Ou, há um outro caminho para as balas gratuitas graças 

o, O 
ao operador OR — um cupom. Então, você pode bo: E leana P s dem ser 
ganhar balas de graça pedindo uma bebida grande E amuso 
uma pipoca grande, OU apresentando um cupom. Esse “S mbinados para tomar 
tipo de decisão seria extremamente difícil de se tomar decisões complexas. 
sem a ajuda de operadores de lógica booleana. 
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por quanto tempo? um “while” 


Execução de um loop for por loops while permitem 
“enquanto”... até cumprir uma condição petir o código 


Embora seja possível criar um loop for que percorra a 

segunda parte do mapa do tesouro, existe uma opção melhor. enquanto uma certa 
Ao contrário do loop, que é estruturado em torno da noção E 

de um contador de loop, o loop whi Le é equipado para a condição for true. 
execução enquanto uma certa condição for cumprida. E 

essa condição não tem necessariamente nada a ver com um 

contador de loop. 


Um loop while consiste em duas partes diferentes: 


Teste de condição Teste de condição 
O teste de condição verifica se 
o loop deve realizar um ciclo. 


( 
Os Passos / e 2 


ocorrem Foda ves 


gre Fermina a loop. Ação Ação z 


A parte da ação do loop é 
o código que na verdade é 
repetido em cada ciclo. 


0-..0..0..0..0..0.. 


A i Aplicar o loop whi Le na segunda parte do mapa 
i ia a = do tesouro resulta em alguns códigos simples, por 
incrível que pareça, pelo menos quando comparado 
Teste de condição O a um loop for: 
Só realiza um outro ciclo de loop (1) 
se o teste resultar em true, ou while (!rockVisible) 
seja, se a rocha ainda não estiver 
visível. takeStep(); 
(2) 
!rockVisible 
Eis como funcionam as diferentes partes desse 
loop while: 
Ação O O Verifica se a rocha não está visivel. se não 
Chame a função takeStep () estiver, avança para o Passo 2 e realiza um ciclo 
para dar um passo. pelo loop. Caso contrário, encerra o loop. 
talcastep o & Executa o código de ação do loop, que neste 


caso significa executar a função takeStep (). 
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O loop while decomposto 


Muito mais simples na estrutura que os loops for, os loops while ainda 
precisam seguir uma fórmula previsível: 
O teste de condição, 
que precisa avaliar se Essa 
+rue ou false, Seja cauteloso com : 
os testes de condição : 
do loop while. : 


while Teste Prosta atenção! Já que os loops while 
não possuem um 


fragmento de código 
EA zJ i embutido que atualiza o loo) 
i certifique-se de que existe cı 
: dentro do loop que de alguma 
forma afeta o teste de condição. 


Caso contrário, você se arrisca 
criando um loop infinito. 


A ação a ser repetida, 
se é uma instrução 
simples Cov composta), 


A partir do exercício do rolo de filme, reescreva o código do loop que 
3 avisa ao usuário para digitar um número maior que 0 e, em seguida, 
Exercicio usa esse número como início da contagem de um loop que realiza a 
contagem regressiva de um rolo de filme antigo (4, 3, 2, 1, Rodando!). 
Dessa vez, use um loop while em vez de um loop for. 


var count = prompt (“Digite um número maior que 0:”, “10”); 


if (count > 0) { 


alert (“O número não era maior que 0. Sem filme!”); 
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solução do exercício 


A partir do exercício do rolo de filme, reescreva o código do loop que 
avisa ao usuário para digitar um número maior que 0 e, em seguida, usa 
Solução do esse número como início da contagem de um loop que realiza a contagem 
Exercicio regressiva de um rolo de filme antigo (4, 3, 2, 1, Rodando!. Dessa vez, use 
um loop whi le em vez de um loop for. n 
Avisa o usuêrio para 


7 
Armazena o numera 1 
7 na digitar um numero, 


na variavel count, 


var count = prompt ("Digite um número maior que 0:”, “107); 


Contagem 

re, pessiva AE feount E Certifica-se de gue 
i; 

ate O. 


Pinda existe 
um contador i 
mas ele é 
criado fora 


do loop while, ação do loop 
alert (VRodando!”) ; G 
E ea ia E E aa yoat aasa Z. 


A ação do 
7 
loop euma else 


instrução 


alert ("O número não era maior que Ù. Sem filme!”); 


composta, 
Terminou a 


Dados inválidos, contagem! 


. No movie for you! 
The number wasn't greater than 0. No e RA 


Go Pontos de Bata 
= Os operadores de lógica booleana 


= A instrução break escapa imediatamente permitem criar uma lógica eficiente true/false 
de um loop, ignorando qualquer código de para tomada de decisões. 


loop restante. A 3 r 
P a Evite um loop infinito certificando-se 


= O loop while executa um fragmento de de que o teste de condição é de algum 
código enquanto um certo teste de condição modo afetado pelo código dentro do loop 


se mantém true. while. 
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Use o loop certo para a tarefa 


O exercício da contagem regressiva de um rolo de filme revelou que 
os loops for e whi le são freqüentemente capazes de resolver 

os mesmos problemas. De fato, qualquer loop for pode ser 
reconstruído como um loop while usando-se a seguinte fórmula: 


ES? z} Um loop while 
l ; pode fazer tudo 
E E Dr DD eo 
ES 5) faz, e vice-versa. 
ES dom 
~ — A inicialização 


LJ acontece fora do 
loop, A atualização 


acombece 
dentro da ação, 


Portanto, é tecnicamente possível codificar os mesmos loops usando 
for ou while, Mesmo assim, você achará, na maioria dos casos, 

que um dos loops parece funcionar claramente melhor em termos de 
código, o que faz sentido. Isso talvez tenha algo a ver com elegância? 


var i = 


(i < 10) € 


while 


alert (i); 


i++) 


for (var i = 0; i< 10; 


alert (i); 


Sem atualização, 


Ésses loops são | Sem inicialização, 


bem apropriados - 


para os a while (!finished) for (; !finished; ) 
problemas que doIt (); di 
eles resolvem, / RS 


Escolher um loop for versus um loop while tem tudo a ver 
com usar a ferramenta certa para a tarefa. Em outras palavras, a 
mecânica do loop deve se encaixar no problema que está prestes a 
acontecer. 
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o confronto: loop for e loop while 


Conversa informal 


Loop for: 


Ah, aqui estamos... apenas uma dupla de colegas 
repetitivos se encontrando. 


Não sou tão complicado assim, apenas adiciono 
um pouco mais de estrutura para criar certos 
tipos de loops. Quando as pessoas querem 
executar um loop usando algum tipo de 
contador numérico, eles encontram satisfação 
na maneira fácil que cu tenho que inicializar e 
atualizar o contador que me controla. 


Parece-me um tanto vago, embora suponho que 
ele poderia funcionar. Eu gostaria de ser mais 
exato, entende, vigiar bem de perto o que me faz 
funcionar. Eis porque faço um esforço específico 
para me inicializar antes mesmo de eu começar 

a executar o loop. Eu também me mantenho 
atualizado no fim de cada loop, apenas para me 
certificar de que continuarei executando como 
esperado. Acho que sou um pouco compulsivo 
sobre me certificar de que eu me repito com 
uma exatidão rigorosa. 


Tenho consciência de que existem várias maneiras 
diferentes de estruturar os loops. Apenas gosto de 
conduzir com pulso firme. 
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Conversa desta noite: Loop for e loop while 
tentam incansavelmente se repetir 


Loop while: 


Sim. Se bem que cu tenho que dizer que não sou 
tão louco pelas diferentes etapas que envolvem 
fazer você funcionar. Parece-me um tanto 
complicado. 


Isso é verdade, mas executar um loop não diz 
respeito somente à contagem, entende? Existem 
todos os tipos de loops excelentes que nem 
envolvem números. Às vezes, você só precisa da 
simplicidade de dizer, “Ei, continue fazendo isso 
por algum tempo”. Esse é o meu tipo de loop. 


Enquanto eu aplaudo seu trabalho ético, você 
percebe que é igualmente possível executar um 
loop de forma confiável e previsível sem toda essa 
coisa formal de inicialização e atualização? Além 
disso, eu sempre repito o código em situações 
onde não há necessidade de inicializar nada, e a 
atualização acontece lá no código de ação. Por 
isso, me contento em executar sem formalidade, 
apenas me concentrando na execução do loop. 


Loop for: 


Isso é verdade, A boa notícia é que nós concluímos 
nosso trabalho da nossa maneira. E eu até consigo 
enxergar onde o meu estilo é um pouco demais 
para um loop com controles lógicos simples. 


Você pode dizer isso novamente! 


Sem problemas, eu entendo. Agradeço o bate- 
papo. 


looping 


Loop while: 


Suponho que isso seja realmente uma questão 
de estilo, e cada loop possui o seu próprio. Você 
gosta de manter todos os controles do loop em 
seu lugar, enquanto sou um pouco mais informal 
em relação a como sou controlado. 


É assim que se fala! Afinal de contas, acho que 
há espaço suficiente para nós dois. 


Eu acho que há espaço suficiente... ih, suponho 
que meus instintos se manifestaram por um 
momento. Desculpe. 


Não existem 
Perguntas Idiotas 


P: O loop while parece muito simples. Deixei 
escapar alguma coisa? 


R: De jeito nenhum. Apenas lembre-se de que simples 
não significa necessariamente fraco ou limitado. Em outras 
palavras, você pode se surpreender com a grande eficácia 
dos loops while. Obviamente, 0 loop while consiste 
somente em um teste de condição e um fragmento de código 
de ação, mas em muitos casos isso é tudo que você precisa 
para executar um loop realmente eficiente. Especialmente se 
considerar que o teste de condição pode se tomar muito mais 
interessante graças aos operadores de lógica booleana. Não 
só isso, mas a parte da ação do loop while pode conter 
a mesma quantidade de código que precisar se usar uma 
instrução composta. 


Pi O que aconteceria se eu criasse um 
loop while que iniciasse while (true)... 
funcionaria? 


RR: sim, funcionaria... talvez muito bem. O problema é que 
você criou apenas um loop infinito, porque o teste de condição 
é permanentemente true. Um loop while continua se 
repetindo até que o teste de condição avalie como false, 
e neste caso essa hora nunca chega. É assustador pensar 
em quantos loops infinitos estão executando exatamente 
neste momento em que você está lendo isso, fadados a se 
repetirem para sempre, eternamente... ei, caia fora disso! 


E É possível que um código de ação do 
loop (o código entre parênteses) nunca seja 
chamado? 


R: Sim. Tanto o loop for quanto o loop while exigem 
que seus testes de condição sejam t rue, antes de iniciar a 
execução do código de ação. Portanto, se por alguma razão o 
teste de condição falhar logo no início, o código de ação não 
executará e o loop sairá antes mesmo de começar. 


P: Os loops podem ser aninhados um dentro 
do outro? 


R: Ah, sim! Os loops aninhados permitem mais de um 
nível de repetição. Isso parece estranho agora, mas é 
muito legal. Exploraremos os loops aninhados mais adiante 
quando o Mandango se desenvolver para pesquisar um 
cinema inteiro! 
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looping bem-sucedido 


O tesouro no fim do loop 


Com o uso de um loop for seguido de um loop while, o mapa 
do tesouro pode ser integralmente percorrido, levando ao tesouro 
no local marcado com um X. 


7 passos, 


O Em seguida, 
ande até encontrar 


uma rocha em 
forma de pipoca. 


O Primeiro. 


ande exatos 37 
passos a leste. 


while (!rockVisible) 


takeStep Í); 


for (var x = Um loop 


while 


takeStep(); ms 
naveços a 


mapa sem 
Um loop for navegou falhar! 
pela primeira parte do [3] O X marca 
mapa com habilidade! realmente o local! 
Ingressos 

O baú do de cinema! 

tesouro se abre 

para revelar... “e 

{ 4 


Isso poderia ser um sinal? O seu recente conhecimento sobre a execução do loop whi le 
e os ingressos de cinema podem levá-lo de volta somente a uma coisa... Mandango! 
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2 
quente seu Lápis 
à pee 

Reescreva o loop na função findSeats () do Mandango, 
de modo a usar um loop while em vez de um loop for. 
Adicione uma nova variável de controle de loop, fini shed, que 
seja usada como um meio de sair do loop pelo teste de condição, 
ao contrário do uso de break. 


ronas seguintes estão disponiveis 


ji Verifica se a poltrona atual e mais as duas polt 


at (sentoli] && seatali + 1] dt seacatd * 299 4 


J} petine a marcação das poltronas e atualiza & aparência delas 


avisa o usuário para aceitar as poltronas 


-antar 
var scoept = confim(*As Poltronas de” + ( 1 


vestão disponíveis, aceita?”); 


rcação e continua procurando 
Ji O usuário rejeitou as poltronas, então desfez a marcaçã ontinua pi 


41 Aumenta o contador do loop 
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solução inteligente 


Aponte seu Lápis 
Na Solução 


Reescreva o loop na função findSeats () do Mandango, 
de modo a usar um loop while em vez de um loop for. 
Adicione uma nova variável de controle de loop, finished, 
que seja usada como um meio de sair do loop pelo teste de 
condição, ao contrário do uso de break. 


Luicialiga o 


Citador de Executa um loop, Ésse loop eum pouco mais hibrido do s pve 

E cavai jigee cortador Lemos visto ate agora, porgue ele é 

E dios de loop é menor dependente tamo de uma expressão de 
que o numero de comaçem pranto de vma expressão de 
poltronas É finished logica booleana, Codificar loops hibridas 
não é true. normalmente fica mais simples usando while, 


oltronas seguintes estão disponiveis 


Jý Verifica se a poltrona atual e mais as duas Pé 


eats[1 + 1) 46 seatali + 2D) ( 
a a aparência delas 


if (seats[i] 66 si 
Define a marcação das poltronas e atualiz: 


/i Avisa o usuário para aceitar as poltronas 


polirne a (É F 17 tee + DS 


var accept = confim("As 


“estão disponíveis, aceita?”); 


lesfaz a marcação e continua procurando 


// O usuário rejeitou as poltronas, ent) 


, 


, 
#j aumenta o contador do loop 


Desine finished como true para 
sair do loop, Como isso afeta 
Aumenta o o Feste de condição, não há 
contador de loop. necessidade de orterramer agui. 
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Parece que o Mandango está muito satisfeito 
com a execução do loop e tudo o mais, mas não 
existem muitos cinemas com apenas uma única 
fileira de poltronas. Precisamos descobrir como 
lidar com mais fileiras... 


Modelagem de dados de poltronas de cinema 


Jason está certo. O Mandango realmente precisa ser capaz de lidar 
com mais fileiras de poltronas para se tornar verdadeiramente 
funcional. Até aqui, uma única fileira de poltronas fazia sentido, 
porque ela mapcava claramente um array de booleanos que 
representa a disponibilidade de poltronas. Para expandir a idéia de 
várias fileiras de poltronas é nece: 


rio a expansão do array, e isso 
requer uma outra dimensão. Isso mesmo, estamos falando de um 
array bidimensional! 


Ésse cinema possuir 
guatro fileiras 

~ de poltranas com 
nove poltronas em 
cada fileira. Sim, é 
aconchegante! 


Cada item no array 
bidimensional 


Precisamos de um array que tenha um tamanho de 9 x 4 para corresponder ) cofinva a ser um 


às poltronas atuais, que são quatro fileiras com nove poltronas em cada. booleano. 
Pjora, existe uma outra 

POR T 
dimensão de indices de array. 


wne o 
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mais de uma dimensão 


Um array de um array: arrays bidimensionais Depois, cria sub- 
Você não precisa de óculos especiais ou qualquer coisa para criar um dido É si 
array bidimensional. De fato, criar um array bidimensional é semelhante coma elementos no 
a criar um array normal (unidimensional), exceto se criar vários sub- array externo, São 
arrays como elementos do array. São esses sub-arrays que adicionam duas dimensões! 

a segunda dimensão, resultando em uma tabela de dados que possui 

fileiras e colunas. a 


| 


y 
var seats = new Array (new Array (9), new Array(9), new Array(9), new Array (9) ) ; 


a 


B 5 Quatro sut-arraçs resuttam em 
Pimeira, cria Um array para abrigar ds 
É suar Z T al guatro fileiras de dados de array, 


No caso do Mandango, nós já sabemos os valores iniciais dos elementos de 
array, então faz sentido usarmos uma abordagem diferente para criar o array 
bidimensional, uma que envolva uma literal de array. Ela cria o array e ao mesmo 
tempo inicializa-o — uma situação de ganho mútuo! 


a Chaves duplas indicam - 
TA um array bidimensional, 


var seats = [[ false, true, false, true, true, true, false, true, false ], 


[ false, true, false, false, true, fa: 


true, true, true ], 
[ true, true, true, true, true, true, false, true, false ], 
[ true, true, true, false, true, false, false, true, false ]]; 


Cada sub-arm 7 

26 possui seu 
E ECA po 
propria indice de arra booleanos esta na primeira 


N 
3 
neste caso entre Dt rá fileira do array limensional, 1 


A primeira lista de valores \ 


False- a poltrona A 


je é está ocupada. Tue-a poltrona 
esta disponivel. 
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Duas chaves para acessar dados de array 


a: . a 
bidimensional Arrays 

Acessar dados em um array bidimensional não é diferente de bidimensionais 
acessar um array unidimensional, exceto se tiver que fornecer um z 

fragmento de informação adicional: o indice do array extra. Mais perm item 


especificamente, você determina os índices da fileira e da coluna 


onde os dados se encontram no array. Por exemplo, para pegar o valor ANMAZEnar dados 
da quarta poltrona na segunda fileira de poltronas, use este código: 
q pi gui p g em abela 


(9) indice da segunda fileira no 


E. array é Pi Ccomeça em D), 


TA 


alert(seats[1][3]); 


7 / Colunas | 
(9) indice do quarto elemento em uma | 
ilei (g ), 
fileira e e3 começa em 4) Fileiras 


Executar um loop por um array com mais de uma 
dimensão envolve o aninhamento de um loop 

em cada dimensão. Portanto, executar um loop 
por um array bidimensional envolve um total de 
dois loops, um dentro do outro. O loop externo 
circula pelas fileiras de dados de array, enquanto o 
loop interno circula dentro de uma fileira. 


p Uma dimensão, 
Duas dimensões. N 


| Loops aninhados permitem 
* a repetição através das 


Aponte seu Lápis duas dimensões dos dados, 


à Escreva o código para executar um loop pelas poltronas 
no array de poltronas bidimensionais, alertando o 
usuário sobre a disponibilidade de cada poltrona. 


você está aqui» 233 


solução inteligente 


fponte seu Lápis 
k Solução | Escreva o código para executar um loop pelas poltronas no 


array de poltronas bidimensionais, alertando o usuário 
sobre a disponibilidade de cada poltrona. 


O loop externo circula pelas 
fileiras de poltronas usando o 
combador de loop i. 


Ésse é o comprimento 
do sub-arra: 
localizado na fileira i. 


O loop interno circula pelas 
poltronas em uma fileira 
usando o cortador de loop j. 


Para acessar uma 
poltrona individual, 
use ama a fileira 

U) coma a coluna G) 
dos dados de array. 


Éxibe um alerta diferente 
com base na disponibilidade As mensagens de disponibilidade 


Erve) ou na indisponibilidade de poltrona mostram a fileira e 
(false) das poltronas. a coluna de cada poltrona, 


Não existem 


Perguntas Idiotas 
P: Os arrays podem ter mais de duas R: Com certeza. Você é livre para adicionar mais dados a um 
dimensões? array sempre que quiser, atribuindo novos dados a seats 


[4] e também pode chamar o método push () do objeto 
im, embora em algum ponto possa ficar complicado Array para adicionar um novo item ao final do array. 
visualizar os dados. Três dimensões podem ser úteis para 
modelar dados do mundo real, como as coordenadas x-y-Z P: Os arrays bidimensionais precisam conter 
de um ponto no espaço. Além disso, as dimensões adicionais o mesmo número de fileiras? 
provavelmente são transferidas para situações muito 
isoladas. Ao adicionar uma outra dimensão, pense em termos R: Não, não exatamente. Lembre-se apenas de que, se as 
de substituir elementos de array individuais por sub-arrays. fileiras não contiverem o mesmo número de elementos, você 
está preparando a receita de um desastre na execução de um 


P: Posteriormente, posso adicionar mais loop, porque os loops aninhados normalmente são criados 

dados a um array, se eu inicializá-lo com os para circular pelo comprimento uniforme de um sub-array. 

dados na criação? Aísim, é possível variar o comprimento de fileiras de arrays 
bidimensionais, mas é uma proposta arriscada que é mais 
seguro evitar. 
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Qy Pontos de Bata 


= Arrays bidimensionais permitem armazenar = Loops aninhados podem ser usados para 


fileiras e colunas de dados em estruturas de se repetirem pelos dados em um array 
tabela. bidimensional. 

= Ao acessar um fragmento de dados = Como nos arrays normais, Os arrays 
individual em um array bidimensional, você bidimensionais podem ser criados e 
precisa especificar tanto a fileira quanto a inicializados a partir das literais do objeto 


coluna do índice. de array. 


Mandango em 2-D 


Embora você já tenha passado pelos fragmentos e partes do código, migrar o 
Mandango de uma simples fileira de poltronas para um cinema inteiro de poltronas 
envolve um trabalho dobrado em grande parte do código de script para explicar os 


dados bidimensionais. 


Lie acerta dois 
combadores de 


loop para circular Migrar o Mandango de /-D 
ço cára de para 2-D envolve mudanças Mais fileiras de poltronas... 
altramas P impressionante! Vamos 
Po E E razoavelmente signiticambes eliminar esse código. 
bidimensional, na codificação, 
j=----------> E 


i 


1 

1 

1 
1 
1 
1 
1 
ý 


De que diferentes formas os arrays bidimensionais afetam o Mandango quando ele migra para 


trabalhar com dados de todo um cinema de poltronas? Como você visualizaria o código de 
script? 
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não é necessário óculos bidimensionais para este código 


O Mandango em 2-D de perto 


Ni isa visual 
o precisa vi são 


eis a codigo complefo do 
Mandanço em 2! 


<html> 
<head> 
tle>Mandango - The Macho Movie Ticket Finder</ticle> 


script typa-ttext/javascripem 
- Saperen n mandango.html 


var seats = [[ false, true, false, true, true, true, false, true, false ], 
[ false, true, false, false, true, false, true, true, true |, 
[ true, true, true, true, true, true, false, true, false ), 
[ true, true, true, false, true, false, false, true, false ]); 
var selSeat = -1; 


7 
function initseats() ( o array bidimensional das variaveis 
/i Inicializa a aparência de todas as poltronas à Glia 
for (var i = O i< seate.length: ite} 1 booleanas de disponibilidade de 
for (var j = 0; j < seats[il.length; j++) { poltronas é criado. 


if (seats [1] [9]) ( 
44 Define a poltrona como disponivel 
document .gerElementById("seat” + (i * seats[i].Length + 3)).src = "seat avail.png' 
document .getElementById "seat" + (i * seats[1].length + 3)) alt = "Available seat! 
1 
else ( 
41 Datine a poltrona como indisponível 
document .getElementById("seat" + (i * sesta[i].length + j}).sre - "seat unavail.png”: 


decument.getElementById("seat” + (i * seats[i]. length + j)).ali = "Unavailable seat?; 
; 
i: Keinicializa as poltronas se o vsvario estiver 
po começando uma nova pesquisa por poltronas, clicando 


novamembe no botão Encontrar Poltronas, 


cada, reinicializa todas as poltronas para renovê-las 
Beneticiando-se do melhor de ambos 
os mundos, um loop while é usado para 

circular pelas fileiras, enguamto um 


j} Pesquisa por todas as disponibilidades de poltronas 


var i = 0, finished = falses loop for circula por poltronas 
while {i < seats.length 5& finished) ( o O gu 
for (var j = 0; j < seats[i).lengtl » individuais em uma fileira, 


14 Verifica se a poltrona atual e mais as duas poltronas seguintes estão disponíveis 
if (seats[1] [3] 66 seats[i][) + 1] &é seatslillj + 21) í 

// Define a marcação da poltrona e atualiza sua aparência 

selSeat = i * seats[i].length + j; 

document .getElementById("sear" + (i * seats[i].length 
document .getElementByid("seat* + (i * seats[i]. length 
document.getElementById("seat" + (i * seats[i]. length 
document .getElementByTa ("seat” + (i * seats[1].length 


function findSeats() t 
// se a poltrona ja estiver mi 
if (seiSeat >= 0) ( 

selSear = -1; 
initsSeats(); 
+ 


jJ) -src = "seat_select.png"; 


= “Your seat"; 
J + 2)}).src = "seat_select.png"; 
j + 2)).alt = "your seat"; 


document.getElementByIdi"seat" + (i * seats[1).length 
document.getElementById("seat" + (i * seats[i]. length 


A+ 4 


/ Avisa o usuário para aceitar a poltrona 
var accept = confirm("As Poltronas de " + (j + 1) +“a“+ (j +3) + 
“ na Fileira “ + {i + 1) + “ estão disponíveis, aceita?”); 
if (accept) ( 
/ O usuário aceitou a poltrona, então damos por encerrado (saí do loop interno) 
finished = true; 


break; 
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1! O usuário rejeitou a poltrona, então desfaz a marcação e 
selSeat = -1; 


continua procurando 


document .getElementByld( “seat” + {i * seats[i].length + 1)).src = "seat avail.png*; 
document .getElementById("seat” + ii * seats[í].length + j)).alt = "Available seat"; 
document .getElementById!'seat" + ii * seats[il].length + j + 1)).src = "seat avail.png" 
document .getE: ntByldi"seat"” + ti * seats[i].length + j + 1)).alt = "Available seat"; 
document .getElenentById(*seat" + (i * seats[i]-length + j + 2)).src = "seat avail.png?; 
document .getElementById("seat” + {i * seats[i].length + j + 2)).alt = “Available seat"; 
à 
i 
) 
Aik ud o contador de loop externo Os contadores de loop de 
sa À Junção int SentsO é e fileira e coluna São necessários 
</script> chamada quando a página é para modificar as imagens das 


</head> 
carregada pela primeira veg, poltronas e alterar o texto, 
<body onload="initSears(1:"> 
<ediv style="margin-top:25px; text-alagnicenter"> 
<img id="seatO” src="" alr="" /> 
<img id="seatl" src="" > 
<img ide"seat2r src="" > 


Não se intimide 


is a Relaxe pelo tamanho 
<img deste código. 
<img ` 

<img id="seat?" sro="" 


Ele usa as mesmas técnicas de 
array bidimensional, mas agora está 
incluido no contexto do Mandango, 


<img id="seat3" sro="" 
<img id="seat9" src="" 
<img id="seat1l0" src=" 


<img id="seatll” src="" 


<img id="seat12" src="" alter" /> com todo o código e imagens HTML 
<img id=tseatl3” src="" alter" /> (disponível para download em www. 
<img ide"seatl4M srce" alte /> altabooks.com.br). 


<img idetseatIS" src="" alt="" /> 
<img id-"seat16" src="" 1» 
<img id="soatl7” src=" /><br 
<img id="seati8" sro="" 
<ımg id="seatl?" src="" 
<img id="seat20" src="" 
<img id="seat21* src="" 
<img id="seat22" src=" 
<img id="seat23" src= 
<img id="seat24" src=" 
<img 1d="geat25" sro="" 
<img id="seat26" src= 
<img idetseat27” src=r" 
<img ad="seat25" src=" 
<img idetseat29" src= 
<img id="seat30” src= 
<img ide"seat31" src=" 
<img id="seat32" src= 
<img idefseat33" src: 
<img id="seat34" src: 
<img id="seat35" src= alt="" /><br /> 
<input type="button" id="findscats” value-"Find Seats" onclick="findSeats();" /> 

</div> 
</body> 
</html> 


Quatro fileiras com 

nove poltronas cada 
exige JC imagens 

HTML... vav! 


À tunção Find SentsO é 
chamada guando o usuário 
clica no bolão Procurar 
poltronas, 
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dançando o tango do mandango 


Um cinema inteiro de poltronas masculinas 


Com duas dimensões para trabalhar, Seth e Jason estão aptos a levar o Mandango 
ao próximo nível e oferecer suporte à pesquisa de poltronas em cinemas amplos... 
numa guinada de macho! Os caras estão cufóricos. 


Nunca mais precisaremos 
sentar juntos novamente! 


O Mandanso agora oferece aos cinéfilos 

machos uma alternativa de +rês poltronas 
em uma fileira dentro de varias opções em um 
cinema. 


e. ss 


| As Poltronas de 2 a 6 na Fileira 3 estão disponíveis, aceita? 
|) 


(Cancel) E 
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Cruzadas do JavaScript 


Todo esse papo sobre poltronas provavelmente lhe deu coceira 
para assistir a um filme no cinema. Antes de sair, tente fazer um 
pequeno alongamento mental com essas palavras cruzadas. 


Horizontal 


2. Esse tipo de loop continua a executar o código, 
enquanto um teste de condição for true. 

4. Use essa instrução para saltar do ciclo atual de 
loop, mas continuar executando o loop. 

8. Se a for true ou b for true, então a .. b são true; 
se não a .. b são false. 

9, Um tipo de dados que permite armazenar vários 
fragmentos de dados em uma variável simples. 

10. A parte de um loop que contém o código para 
executar repetidamente. 

11. A parte de um loop que prepara o loop para 
começar. 

13. Um tipo de loop que é perfeitamente 


apropriado para contagem. 


Vertical 
1. A parte de um loop que precisa ter um resultado 
booleano. 

3. Uma... é usada para acessar um valor em um 
=o 

5. Operadores de ..... booleana opera em valores 
booleanos e retorna um resultado booleano. 

6. A parte de um loop que é responsável pela 
mudança do estado de quaisquer controles de loop. 
7. Se você quiser terminar um loop imediatamente, 
use essa instrução. 

10. Se a for true e b for true, então a ... b são true; 
se não a ... b são false. 

12. Acessar um valor de array usando um número 
requer um.. 
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solução da Cruzada do JavaScript 
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Dobre a páginana O que os loops e os filmes 
vertical ti alinhar T P AT gs 


tem em comum? / 


NAS 


B dee É um encontro de mentes! ~~~ E) 


os dois cérebros e 
resolver a charada. 


Alguns filmes são conhecidos por terem enredos circulares 
difíceis de entender. Outros usam 
movimentos e muita ação para atrair o público. 
No final, um filme é apenas um filme. 
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6 Funções % 


* Reduza, Reutilize, Recicle 


É essa coisa de bolo de 
carne que você cozinha uma 
vez e depois come durante 
semanas...Alguém me ajude! 


Se houvesse um movimento ambiental dentro do JavaScript, ele 
seria liderado pelas funções. As funções permitem tomar o código JavaScript mais 
eficiente e, sim, mais reutilizável. As funções são baseadas em tarefas, boas na organização de códigos 
e excelentes solucionadores de problemas. Parecem os requisitos para um bom reinicio! Na realidade, 
todos, exceto os mais simples dos scritps, estão sujeitos ao beneficio de uma reorganização funcional. 
Embora seja difícil avaliar o efeito do carbono da função comum, digamos apenas que elas fazem a parte 
delas tornando os scripts os mais ecologicamente amigáveis. 


como dissecar grandes problemas 


A mãe de todos os problemas 


Quando refletimos friamente sobre isso, a criação de scripts para a web tem tudo 
a ver com solução de problemas. Não importa se é um grande problema, com 
idéias e planejamento suficientes, há sempre uma solução. Mas e em relação aos 
problemas realmente enormes? 


Paz mundial 


Ésse evm grande 
problema! 


Ee A 


O truque para solucionar grandes problemas é decompó-lo em problemas menores 
e mais gerenciáveis. E se esses problemas ainda forem muito grandes, então 
decomponha-os mais uma vez. 


Problema menor, a 


us 

Wo) 

Alimento L | Direitos civis | 
med : 


Agricultura [E Distribuição Direitos de Construção fË Liberdade do Ë Direito a voto 
Cas propriedade pis À cnprossão i 


E esse processo continua muitas vezes... 
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Solucione grandes problemas solucionando os pequenos 


Continuando a decompor o problema da paz mundial em pequenos problemas, com 
tempo, você chega até um problema pequeno o suficiente para o JavaScript gerenciar. 


Um bom problema que se 
encontra no ambito de 
uma solução UavaSeripr. 


-eE E 


Materiais Serviços públicos Controle de temperatura P| e 


Pense em um equivalente JavaScript para o problema do controle de 
temperatura, que envolveria a criação de um script equivalente a um 
termostato, usado para controlar a temperatura de um meio ambiente. 
O termostato mais básico teria simplesmente um botão “aquecimento”. 


O termostato mais 
r, 

facil - pressione o 

botão e ele inicie, 


a 


USE O AQUECIMENTO 


Você não precisa se 
preocupar em como 
° agvecimerto 

e processado, 
apenas presisa 
saber coma liga-lo, 


Observe como o termostato não revela nada sobre como o 
aquecimento é realizado. Você pressiona o botão Aquecimento e 
fica aquecido. Resolvido o problema do controle de temperatura! 
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Funções como solucionadores de problemas 


O botão Aquecimento no termostato é o equivalente de uma função Funções 
no JavaScript. A idéia é semelhante ao termostato do mundo real f 
— alguém solicita aquecimento, a função fornece. Os detalhes do transtormam 


aquecimento são manipulados dentro da função, e não são importantes 
pares clip dica an Des aama ETANdES 


funçã “cai ? — informaçõ odi der di probl 
junção como uma “caixa preta” — informações que podem proceder de bis, sü 


dentro e de fora dela, mas o que acontece dentro é responsabilidade da 


caixa e, portanto, não é importante para o código fora da caixa. p q jenos 


ici Fica mais 
Solicita —— 
aquecimento -9 quente 


Converter o botão Aquecimento em código JavaScript envolve a chamada 
de uma função chamada heat () .…. 


Solicita ——> heat(); ———> Fica mais 
aquecimento quente 


Eis e 
TAT Qualquer pessoa que gueira 


aguecimento so precisa saber 


) 


+ 
function heat () 1 


;/ Produz algum aquecimento, de certa forma BE como chamar a função heato, 


shovelCoal (); 


lightFire(); 
0 aguecimenta atual 


e é produzido pela 
chamada dessas três 
outras funções. 


harnessSun() ; 


A pessoa pre escreve a 

função bee é a única Não é tão importante como a função heat () produz o 

pessoa gue precisa se aquecimento. O que interessa é que ela serve como uma solução 

prescupar em cama a função independente para o problema. Se precisar de algum aquecimento, 

esquenta. chame a função heat (). Os detalhes da solução do problema são 
deixados para o mecanismo interno da função. 
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Elementos básicos de uma função 


Ao escolher criar uma função, você se torna o solucionador do problema. Criar 
uma função exige que se use uma sintaxe coerente que ligue o nome da função ao 
código que a executará. À seguir, a sintaxe para a função mais básica do JavaScript: 


o código dentro de uma 


Um identificador que Função faz realmemte 

~ Case, ~ 

Inicia uma funçao com a usa lowenCamelCase. parte de uma instrução 
palavra-chave function. ( composta, à, GU começa 


ka com uma chaye, 


Parêmeses são um sinal 

LJ O corpa da função é onde de que essa € uma função, 
Lodo o Lrabalho se localiza. x 
Termina a função com uma 
chave de fechamento, 
Termina a função com uma 
chave de fechamento, Dar uma outra olhada no código em relação à função 
heat (), ajuda a colocar a sintaxe de função em perspectiva: 


function heat t) { 


fÍ Produz algum aquecimento, de uma certa forma 


O corpo da 
y shovelCoal (); 
função produz, 
o aguecimento lightFire(); 
atual. harnesssSun (); O corpo da função esta 


} cercado por chaves 
r 
— ele € apenas uma 
~ 
instrução composta, 


gut 


Até agora, quando foi que você viu as funções solucionarem os problemas? 


você está aqui» 247 


funções Mandango 


Uma função que você já conhecia 


Você não precisa observar mais atentamente o script do localizador macho de 
poltronas Mandango (arquivos completos disponíveis em 444p:/ / www: beadfrstiabs. 
comi books/ bfs/) para encontrar um bom exemplo de função que soluciona 


problemas — neste caso, o problema de inicializar os dados de poltronas de cinema. 
Eis como o problema do Mandango foi decomposto: 


Um grande problema, 


Busca por poltronas de macho 


Problemas menores. 


Incializa poltronas 


Encontra poltronas 


O sub-problema da inicialização de poltronas era pequeno o suficiente 
para ser resolvido com uma função, a função initSeats (): 


O tnicializa a aparência de todas as poltronas 
var i = O; à < sents.length; i++) É 
for (var i = O; i < seat . 
for (var j =. O; J < nestolij.lenatho 1t) À 
if tseats[i][j]l) i 


disponivel x 
4/ Define a poltrona como disponi mrm ena 
5i {i + seats[i]-length + 5)) -SI K 
scumen: lementByld ( "seat" + di tsti 5 a sad pnan 
as a haraki ntByld("seat" + (G 7 seats[i]. length + j)ì.alt Available 
jocument .ge e: 

) 

e 1 mo indisponível ETT 
í e a poltrona cor v > 7 e er 
do Bene GerElementByIa "seat" + (4 + seats[i].length + 1)) ore 7 pe PA 
a a pti tElementById("seat" ma t a seats[i].length + J)).al 
ocument.getElem , 


A função initSeats () faz parte da página da web 
do Mandango. A função não é chamada até que ela seja 
ligada ao manipulador de eventos onload. Isso faz 
com que a função execute quando a página carrega. 


int SeatsO não é à 
7 

unico solucionados de 

problemas no Mandanço. 


<body 
onload="initSeats (0);"> f A 
<div style="height:ż5px"></div> ; 
<div style=" enter"> 
<img id="seat 
j> V 


findseats" value="Find Seats” onc =vfindseats ():" /> 


<img 1d 
<input typ 
</div> 
</body> 
</html> 
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P: Como funciona mesmo a 
convenção de nomenclatura 
para funções? 


R: lowerCamelCase é a convenção 
para nomenclatura de identificadores 
JavaScript onde a primeira palavra 
em um identificador é toda em letras 
minúsculas, mas as palavras adicionais 
são em letras maiúsculas e minúsculas, 
misturadas. Então, uma função que 
classifica um filme poderia ser chamada 
de rateMovie(), enquanto uma 
função que coloca para fora um cara que 
insiste em falar em seu telefone celular 
durante um filme poderia ser chamada de 
removeInappropriateGuy (). 


P: As funções sempre se 
relacionam à transformação 
de grandes problemas em 
pequenos? 


R: Não necessariamente. Existem 
situações onde as funções são úteis 
simplesmente como uma parte do 
trabalho de codificação. Em outras 


Não existem 
Perguntas idiotas 


palavras, talvez seja o único problema 
a ser resolvido por várias funções 
trabalhando juntas. Neste caso, a 
justificativa da divisão do código em 
funções é ajudar a dividir o trabalho e 
dar a cada função seu próprio sentido. 
Mais ou menos como quando são dados 
cargos diferentes às pessoas, de forma 
que elas possam se concentrar em um 
tipo específico de tarefa. Tais funções 
podem ou não solucionar problemas 
específicos, mas elas definitivamente 
melhoram a estrutura dos scripts 
dividindo o trabalho. 


P: Como você sabe quando 
um bloco de código deve ser 
colocado em uma função? 


R: infelizmente, não há uma fórmula 
mágica para saber quando faz mais 
sentido colocar um código em uma 
função. Mas existem alguns sinais 
que você pode procurar como pistas. 


funções 


Um deles é quando você se pega 
reproduzindo um fragmento de código. 
A reprodução de código nem sempre é 
uma boa idéia, porque é preciso mantê- 
lo em mais de um lugar. Então, um 
código reproduzido é um grande alvo a 
ser colocado em uma função. Um outro 
sinal é uma situação onde um fragmento 
de código toma-se incontrolável, e você 
é capaz de decifrar várias partes lógicas 
para ele. Essa é uma boa hora de aplicar 
a idéia de “divisão de trabalho” ao 
código. e considerar sua decomposição 
em múltiplas funções. 


P: Pensei que eu lembrasse 
das funções que aceitavam 
argumentos e, em seguida, 
passavam os dados de volta. 
Estou deixando escapar 
alguma coisa? 


R: Não, absolutamente. Certamente, 
existem funções que aceitam e retornam 
dados. Na verdade, você está prestes a 
ver a função heat () se transformar 
em uma delas, se tiver paciência. 


O nome de uma função é extremamente importante em transmitir 
imediatamente o que ela faz. Tente nomear essa funções, certificando-se 


oi cio 


Solicita poltrona 
do corredor 


Solicita devolução —> e 


de usar letras minúsculas e maiúsculas. 


Recebe o ingresso 
para a poltrona do 
corredor 


A pipoca é jogada 
nos outros 
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solução do exercício 


O nome de uma função é extremamente importante em transmitir 
imediatamente o que ela faz. Tente nomear essa funções, certificando-se 
Solução do de usar letras minúsculas e maiúsculas. 
Exercício 
Solicita 
poltrona do Recebe o ingresso para 
corredor a poltrona do corredor 
Solicita 
devolução 
Joga —> 
pipoca 
Existem muitos outros nomes de função gue 
funcianariam agui, Ésses são apenas alguns bons 
exemplos de nomes resumidos em lower camel case. 


Ahh, é 
aconchegante. 


Estou queimando! Por favor, desligue 
o aquecedor. Ou eu estou sentindo os 
efeitos do aquecimento local? 


Difícil de se lidar 5 


Enquanto isso, a iniciativa de viabilizar a paz mundial através do controle de 
temperatura topou com uma dificuldade. Parece que o botão Aquecimento 
funciona muito bem, ou talvez seja apenas um problema da função heat () 
que precisa de mais dados. De qualquer forma, algo precisa ser corrigido. 
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Como criar um termostato melhor com mais dados 


Então, de volta ao termostato... ele não sabe quando parar de aquecer, porque em 
nenhum momento definimos uma temperatura a ser atingida. Simplesmente, não há 
informação suficiente para solucionar o problema de maneira eficaz, o que significa 
que alguém pressiona o botão Aquecimento e se aquece... continuamente! 


O botão Temperatura permite 
7 

ao usuario definir uma 

+Lemperatura aser atingida, 


Agora, o termostato aperfeiçoado aceita 
a temperatura a ser atingida como uma 
informação que ele pode usar para realizar o 
processo de “aquecimento”. 


Temperatura 

a ser atingida 
Solicita o Fica mais 
aquecimento : quente 


A temperatura a ser RC T 


atingida agora serve 
como uma informação heat (targetTemp) ; 


demtro da função. 


Escreva o código de uma função heat () aperfeiçoada que aceita uma 
temperatura a ser atingida e a usa para gerar calor somente enquanto a 

Exercício temperatura atual for menor que a temperatura a ser atingida. Dica: chame 
a função hipotética get Temp () para obter a temperatura atual. 


E ais function heat (targetTemp) ( 
Perescemamos 


uma linha para 


voce iniciar, 
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Argumentos de função como dados 


Quando os dados são passados para uma função como um argumento, eles agem 
como uma variável local inicializada dentro da função Como exemplo. aqui 2 
função heat () está sendo fornecida com uma temperatura 2 ser atingida que é 
passada para a função como um argumento: sperm 
E 
heat (72) ; 


Dentro da função heat (), o argumento target Temp está acessível 
como se fosse uma variável local inicializada como 72. Substituir o código 
normal da função heat () por um alerta revela o valor do argumento. 


tá Dentro da função kesto, 
s ergumemo se parece 
function heat (targetTemp) ( com uma variavel local, 
alert (targetTemp) ; i 
4 
©} 


( 


Assim que a função sai, 
targef Emp desaparece, 


Embora os argumentos de função ajam de forma bem parecida com as variáveis 
locais dentro de uma função, alterar um valor de argumento dentro de uma função 
não afeta nada fora da função. Essa regra não se aplica a objetos que são passados 
como argumentos — vamos nos aprofundar em objetos nos Capítulos 9 e 10. 


Diminua (grau 


A variavel temp é 
5 sua da temperatura, 


passada para a função 
var temp = 80; como um argumento, | 


coolIt (temp) ; 


function coolIt (temperature) { 


temperature- 


alert (temp) ; 


Mesmo gue o argumento de 
+emperatura seja alterado É 


2o, à variavel 
dentro da função, pa E 
externa permanece proteg a. 
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como remover duplicação com funções 


Funções eliminam código duplicado 


Além de decompor os problemas, de forma que eles possam ser solucionados 
com mais facilidade, as funções servem como excelente forma de eliminar 
código duplicado, generalizando as tarefas. Uma tarefa generalizada pode © calculo da 
ser usada para eliminar códigos semelhantes que aparecem em mais de um por coma sem 
lugar. Mesmo que o código não seja idêntico, em muitos casos você pode 4 

ee da © dedesconto e 
generalizá-lo como código idêntico que pode ser colocado em uma função. 

desnecessariamente 


Então, você chama a função em vez de duplicar o código semelhante. 
duplicado. 


A seguir, três fragmentos de código diferentes que envolvem tarefas 


semelhantes que poderiam ser generalizados em uma tarefa única e 


reutilizável: 


// Ingresso para matinê é 10% mais barato / Ingresso para adulto é 154 mais barato 


PfeniorTicker = adultTicket + (1 - 0.15); 


matineeTicket = adultTicket * (1 - 0.10); 


às é 20% mais barato 


// Ingresso para Cria 


q - 0.20); 


childTicket = adultTicket * 


Tarefas especificas envolvem o cálculo de preços de três tipos diferentes 
de ingressos de cinema com desconto. Mas cssas tarefas podem ser 
generalizadas em uma tarefa que envolve o cálculo de preço de um 
ingresso com base em qualquer porcentagem de desconto. 


í 


function discountPrice (price, percentage) 


(1 - (percentage / 100))); 


return (price * 


Funções +ambém 
podem retornar 
dados. 


Com uma função generalizada de desconto de ingresso sob controle, os 
outros três fragmentos de código podem ser reescritos de uma forma 
muito mais eficiente: 


/ Ingresso para matinê é 10% mais barato /! Ingresso para adulto é 15% mais barato 


mat. - 
ineeTicket = discountPrice (adultTicket, 10); |NfsenicrTicker = discountPrice (adultTicket, 15); 


/Í Ingresso para crianças é 20% mais barato 


discountPrice (adultTicket, 20); 


childTicket = 
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Argumentos de função como dados 


Quando os dados são passados para uma função como um argumento, eles agem 
como uma variável local inicializada dentro da função. Como exemplo, aqui a 
função heat () está sendo fornecida com uma temperatura a ser atingida que é 


assada para a função como um argumento: 
B k ee A temperatura a ser 


7 
heat (72) ; atingida e passada 
paraa função como um 
1 
número literal. 
Dentro da função heat (), o argumento target Temp está acessível 
como se fosse uma variável local inicializada como 72. Substituir o código 
normal da função heat () por um alerta revela o valor do argumento. 


72 Dentro da função heat), 
g argumento se parece 
Z 
javel local, 
function heat (targetTemp) ( ag fa a 


alert (targetTemp) ; 


} 
s n 
Assim gue a função sai, 
Hargeffemp desaparece. 


Embora os argumentos de função ajam de forma bem parecida com as variáveis 
locais dentro de uma função, alterar um valor de argumento dentro de uma função 
não afeta nada fora da função. Essa regra não se aplica a objetos que são passados 
como argumentos — vamos nos aprofundar em objetos nos Capítulos 9 e 10. 


Diminua / grau 


1 1 
javel 
ds Terp s da +emperatura, 


passada para a função 
var temp = 80; comoum argumento, 


coolIt (temp) ; 
alert (temp) ; 


function coclIt (temperature) { 


temperature--; 


Mesmo que o argumento de 
temperatura seje alterado rã 


ivel 
dembro da função, & variavel 
externa permanece protegida. gases 
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como remover duplicação com funções 


Funções eliminam código duplicado 


Além de decompor os problemas, de forma que eles possam ser solucionados 

com mais facilidade, as funções servem como excelente forma de eliminar 

código duplicado, generalizando as tarefas. Uma tarefa generalizada pode © calculo da 
ser usada para eliminar códigos semelhantes que aparecem em mais de um porcema agem 
lugar. Mesmo que o código não seja idêntico, em muitos casos você pode 
generalizá-lo como código idêntico que pode ser colocado em uma função. 
Então, você chama a função em vez de duplicar o código semelhante. 


de desconto é 
desnecessariamente 
duplicado. 


A seguir, três fragmentos de código diferentes que envolvem tarefas 
semelhantes que poderiam ser generalizados em uma tarefa única e 
reutilizável: 


// Ingresso para matiné é 108 mais barato | 1N97e5S0 para adulto é 154 mais barato 


matineeTicket = adultTicket * (1 - 0. Deca SA a E fi acaso 


10); 


so para crianças é 20% mais barato 


ii Ingres: 
a - 0.20); 


childricket = adultTicket * 


Tarefas específicas envolvem o cálculo de preços de três tipos diferentes 
de ingressos de cinema com desconto. Mas essas tarefas podem ser 
generalizadas em uma tarefa que envolve o cálculo de preço de um 
ingresso com base em qualquer porcentagem de desconto. 


percentage) ( 


function discountPrice (price, 


- (percentage / 100)) 


return (price * 


Funções +ambém 
podem retornar 
dados, 


Com uma função generalizada de desconto de ingresso sob controle, os 
outros três fragmentos de código podem ser reescritos de uma forma 
muito mais eficiente: 


n 
Ingresso para matinê é 10% mais barato // Ingresso para adulto é 15% mais barato 


matii E 
neeTicket = discountPrice(adultTicket, 10); eniorTicket = discountPrice (adultTicket, 15); 


Fa n 
// Ingresso para crianças é 20% mais barato 


(adultTicket, 20); 


childticket = discountPrice 
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5 SEJA o Perito em Eficiencia 


À função findSeatsQ do localizador macho de 
poltrenas Mandango encontra- 

se abaixo com todo o seu 
esplendor anterior. Usando o seu 
conhecimento recente de eficiencia, 
circule o código semelhante que 
poderia ser reescrito como uma 
função generalizada e reutilizável. 


function findSeats () ( 


/f Se as poltronas já estiverem marcadas, reinicializa todas as poltronas para removê-las 
1f (selSeat >= 0) { 

selSeat = -1; 

initseats(); 


/ Pesquisa por todas as disponibilidades de poltronas 
var i = 0, finished = false; 
while tí < seats.length && !finished) ( - 
for (var j = 0; j < seats[i].length; j++) ( 
1! Verifica se a poltrona atual e as duas seguintes estão disponíveis 
if (seats[i][j] 66 seats[i][j + 1) 64 seats[i][j + 2)) { 
// Define a marcação da poltrona e atualiza sua aparência 
selSeat = i * seats[i].length + j; 


document .getElementById("seat" + (i * seats[i].length + 51).src = "seat selecr.png” 
document .getFlementById ("seat" + {i * seats(i].length + J}).alt = "your seat"; 

document .getElementeyId("sear" + (i * seats[i].length + j + 1)).src = "seat select.png"; 
document .getElementById("sear" + (i * seats[1].length + } + 1)).alt = "your seat"; 
document .getElementById ("sear" + (i * seats[i].length + j + 2)).src = "seat select.png"; 
document .getElementById("seat" + (i * seats[i].length + j + 2)).alt = "your seat"; 


4) Avisa o usuário para aceitar a poltrona 
var accept = confirm(“As Poltronas de “ + ()+1)+“av+1+3)+ 
~“ na Fileira “+ {i + 1) +“ estão disponíveis, aceita?”); 
if (accept) í 
// O usuário aceitou a poltrona, então damos por encerrado (sai do loop interno) 
finished = true; 


break; 

, 

else | 
// O usuário rejeitou a poltrona, então desfaz a marcação e continua procurando 
selSeat = -1; 


document .getElementById("seat" + {i * seats[i].length + j)).src = "seat avail.png"; 
document .getElementById("seat" + (i * seats[i].length + j)).alt = "Available seat”; 

document .getElementById(“seat" + (1 * seats[i].length + j + 1)).src = "seat avail.png"; 
document .getElementById ("seat" + (i * seats[i].length + j + 1)).alt = "Available seat 
document .getElementPyId + (i * seats[i].length + j + 2)).src = “seat avail.png! 
document .getElementByTd + (1 * seats[i].length + j + 2)).alt = "Available seat"; 


i 
} 


// Aumenta o contador de loop externo 
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SEJA o Perito em Eficiencia Solução 


À função findSeatsQ do localizador mache de poltronas 
Mandango encontra-se abaixo com todo o seu 
esplendor anterior. Usando o seu 
conhecimento recente de eficiencia, 
circule o código semelhante que 
poderia ser reescrito como uma 
função generalizada e reutilizável. 


function findSeats() { 


41 Se as poltronas já estiverem marcadas, reinicializa todas as poltronas para removê-las 


if (selSeat 0) 4 
selSeat = -1; 
initseats(); 


} 


// Pesquisa por todas as disponibilidades de poltronas 
var i = 0, finished = false; 
while {i < seats.length £& !finished) ( 
for (var j = 0; j < seats[i].length; j++) i 
/i Verifica se a poltrona atual e as duas seguintes estão disponíveis 
if (seats[i][j] 56 seats[i][j + 1] 65 seats[i][j + 2]) { 
!/ Define a marcação da poltrona e atualiza sua aparência á 
selscat = i * seats[il.length + j; a 
focument .getElementById("seat" + (i * seats[i].length + j)).src = "seat_select.png"; 
T e A + (i * seats[i].length + j)).alt = "Your seat"; 
Gcument -getElementSV Id "esse A i eaei tenge F + I))-src = "seat _select.png™?N) 
document .getElementByld "seat" + (i * seats[i].length + j + 1)).alt our seat"; 


TGECETenenEBp Ta” E UR E T EN SEC = seat select.pna”y fi 


our seat"; 


focumen 
document .getElementById("seat" + (i * seats[i].length + 5 + 


4! Avisa o usuário para aceitar a poltrona KR | 
var accept = confirm(“As Poltronas de “ + ()+1) +“av+(5+3)+ | 
~ na Fileira “+ {i + 1) + “ estão disponiveis, aceita?”); | 
if (accept) É 
ji O usuário aceitou a poltrona, então damos por encerrado (sai do loop interno) | 
Vi que esses seis fragmentas de código | 


true; 


executam a mesma tarefa geral, eles podem ser | 


else ( transformades em uma unica fu 
41 O usuário rejeitou a poltrona, então desfaz a marcação e continua procurando 


j 
seateli].Iength + jj).sro = "seat_avail.png" N [ 
seatslij.length + jj).alt = "Available seat”; j 


E eneee e Sre seat avail. pri 


seats[i].length + j + 1)j.alt = "Available seat" 
rengen FS SEO = “Seat avall.pn: 
* seats(1].length + J + 2)).alt = "available sea! 


selSeat = -1; 
focunent -astElementById( 
document. a 


) R 
| E A propriedade length 
// Aumenta o contador de loop externo ainda funciona para 
itt: e ` Es LA 
g Codigo duplicado. Podemos extrair alguns obter o número de 
} atributos daqui. ens em um svb-array 
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Como criar uma função de definição de poltronas 


Agora que os caras do Mandango aprenderam essa coisa de cficiência, cles se 
entusiasmaram com a adição de uma função no Mandango que torna a marcação 
de poltrona mais eficiente (código disponível em »zmaitabooks.com.br). No 

entanto, para escrever a função set Seat (), eles realmente precisam descobrir 
quais argumentos são necessários, Você pode isolar os argumentos necessários 
examinando quais fragmentos de informação estão diferentes no código duplicado. 
Uma observação mais atenta nas partes duplicadas da função findSeats () revela 
esses argumentos: 


„> Número da poltrona 


Número da poltrona a ser definido. 
Ele não é um índice de array; 
apenas o número da poltrona, se 
você fosse começar a contar da 
Os atributos esquerda para a direita e de cima 
findSeat-sO são para baixo, começando em 0. 
extraidos do codigo 
duplicado que sera» 
alien função, > Status 

A Status da poltrona: disponível, 


í N indisponível e marcado. Ele 


é usado para determinar qual 
/ Descrição 


imagem de poltrona exibir. 
/ Descrição do status das poltronas: 


Cara, as funções 
são o máximo! 
Precisamos de 

mais dessas coisas, 


Eu sei, mas eu te ligo 
de volta... tem uma 
pessoa na outra linha. 


“Poltrona disponível”, “Poltrona 
indisponível” e “Sua poltrona”, Ele 
é usado para definir o texto alt das 
imagens das poltronas. 


ponte seu Lápis 


A 
hos $ 


Escreva o código da função setSeat () do Mandango. 
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como reutilizar o código do Mandango 


Aponte seu Lápis 
~ Solução 


Escreva o código da função setSeat () do Mandango. 


Os três argumentos estão 


separados por virgulas, 


t ” + status + 


Os dados especificas usados no 


original são substrhvidos agora pelos 


argumentos generalizados, 


Um Ma i i i 
ph ndango mais enxuto, mais organizado, O número, o status ea 
unções descrição da poltrona 


Manifestar um código semelhante, duplicado, dentro da função SPE 
setSeat () function simplifica o código da função findSeatss () set Seto em cada 
de di considerável. Agora, existem seis chamadas para a função SARA Função, 
setSeat (), o que é uma melhoria significant 

reutilização de código. pag 


function findseats O | 


J7 pesquisa por todas as disponibilidades de poltronas 
var i = 0, finished = false; 
while (i < seats.length 66 !inished) t 
tor (var j = 0; j < seats[i).lengeh: jtt) ( 
r y Verifica se à poltrona atual e as duas seguintes serio disponíveis 
de Uoacsi&I(g] éé neateli)I) + 11 66 semte(i)(3+ MIA A 
Iy potna a marcação da poltrona e atualiza sus aparência 
selSeat = i * sests[i). Length + j; 
{ DetSent(i * seats[i].length + j, “marque”, "sua poltrona”); 


DotSent(s + seats[1] Length + 5 + 1 “margue”, zeue poltrona”); 
oebeut (i * sento [4] Length + 3 + 2, “marque”, “sua poltrona”); 


jj Avisa o usuário para aceitar a poltroni 

M S ponnen( hs Poltronas da é + (3 + 2) FERE O A T 3 
en = 4 (1 + 1) + * estão disponiveis, aceita?"); 

it (accept) ( 
4) O usuário aceitou a poltrona, então damos por é 
finished = true 


cerrado (sai do loop interno) 


A nova função 
setSeato é 
chamada seis 
vezes. 


break; 

, 

else 1 
7e O usuário rejeitou a poltrona, então desfaz a mar 
selSeat = -1; 

(a = sestoli] length + 3, “avail”, “Poltrona disponível”) ; 


cação e continua procurando 


etsest(a + sesto(i] Length + J + 1, Jdiepon”. “Poltrona disponível”) 
Ceacat (i è santo [4] length + J + 2, "dtepon”, "Poltrona disponível"); 


j/ Aumenta o contador de loop externo 
irt 

} 
y 
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A função setSeat() torna o Mandango ainda melhor 


Mas a função set Seat () não beneficia apenas findSeats (). Ela também 
ajuda a tornar a função initSeats () mais eficiente, porque essa função 
também possui um código de definição de poltronas semelhante. 


7 me 
ion initseats() ( . DAS MNESTÃO CA CAMPINAS TAa 
fuocemicializa a aparência de todas as poltronas iga campi 
for (var i = O; 1 < seats.length; itt) ( +ranstormadas em uma chamada de 
or ly =0; 


y + ~ F TPA 
for (var 3 = 0; j < seats[i).length; j+ | função melativamente obvia. 
else ( 


if (seats{il[}]) ( 
7) Define a poltrona como indisponível Asa ale 


j omo disponivel a ao. 

i To eman “ssa” + i + seats[i].length + j)).sre = seat avail.png 
"seat" «length + 3)) -sre = n 

document. getElementById("seat + (i * seats[i] e t ate E ernavailablo sont: 


document .getElementById("seat” + (i * soste[1] length + 3)) alt = "Available seat 
docunent.getElementByTd(" seat” + (i * seats [1]. 


function initSeats() | 


// Inicializa a aparência de todas as poltronas / 
for (var i i < seats. length; i++) { 
for (var j = 0; j < seats[i].length; j++) ( 
if (seats[i][j]) ( 


4/ Define a poltrona como disponível 
setSeat(i + seats[i].length + 3, “dispon”, “Poltrona disponivel”); 


} 
else ( > 


Ceneralizando a Farefa 
de marcar uma poltrona, a Define a poltrona como indisponível 

E È setseat(i + mE 
função sel-SeatO funciona indieponiveteps tali] Length + J, “indisp”, “Poltrona 
sem em um contexto 


completamente diferente. 


Então, uma função razoavelmente simples que consiste em duas linhas de código, agora é 

usada oito vezes em todo o script do Mandango. Ela não só simplifica o código de script, 
como o torna mais fácil de manter, porque se precisar alterar a definição de uma poltrona, 
você só precisa alterar um único fragmento de código set Seat (), em contraste com os 
oito fragmentos separados. Nenhum codificador de JavaScript em seu juízo perfeito deseja 
alterar vários fragmentos de código, quando não há necessidade. Sustentabilidade... é bom. 


Quioto Bala 


a As funções permitem transformar 
problemas grandes em pequenos, o 
que facilita a solução. 


a Às funções servem como uma ótima 
maneira de eliminar código duplicado, 
já que o código em uma função pode ser 
reutilizado quantas vezes você quiser. 


a As funções oferecem he mecanismo Ou di entos permitem dados. 
PROL pan a is CS para as funções como informações de 
seguida, completá-las com blocos de arde E. 

código reutilizável. " 
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pergunte a elas se está tudo bem 


P: Existe um limite para o 
número de argumentos que 
podem ser passados para uma 
função? 


R: Não e sim. Não, não hå um 
limite real em relação ao número de 
argumentos que podem ser passados 
para uma função, a menos que você 
inclua como fatores os limites da 
memória do computador. Se estiver 
passando muitos argumentos a ponto 
da memória se tornar um problema, 
você precisa parar e repensar sobre o 
que está fazendo, porque para causar 
um problema de memória é necessário 
muitos argumentos. O máximo da 
limitação tem a ver com um bom 
design, e que significa manter o número 
de argumentos em uma quantidade 
gerenciável perfeitamente ajustada 
para que as chamadas de função não 
sejam absurdamente complicadas. 
Normalmente, é uma boa idéia usar 
apenas um número reduzido de 
argumentos. 


Não existem 
Perguntas idiotas 


P: Eu aprendi que as funções 
transformam problemas 
grandes em pequenos, divide o 
trabalho de criação de scripts e 
elimina código duplicado. Qual 
é a opção certa? 


R: Todas. As funções são boas 
em mais de um fator e, em muitos 
casos, as melhores funções cumprem 
várias metas de uma só vez. Não que 
seja impossível criar uma função que 
solucione um problema secundário, 
que execute uma tarefa de divisão de 
trabalho e que elimine código duplicado, 
tudo ao mesmo tempo. De fato, essas 
são três excelentes metas para se ter 
ao criar qualquer função. Mas se tiver 
que se concentrar em uma coisa, você 
vai querer errar no lado da divisão de 
trabalho, o que realmente significa dar 
a cada função um objetivo especifico. 
Se cada função se sobressair em 
algo específico, seus scripts serão 
beneficiados consideravelmente. 


P: Mais uma vez, para onde 
vão as funções no cabeçalho 
ou no corpo de uma página 
da web? 


R: As funções devem aparecer dentro 
da tag <script> no topo da página, 
ou em um arquivo JavaScript externo 
que seja importado para o topo da 
página. 


P: Se eu quiser mesmo que 
uma função altere o valor de 
um argumento, como faço? 


R: Os argumentos de função não 
podem ser alterados diretamente, 
ou pelo menos as alterações não 
prosseguirão fora da função. Então, 
se quiser alterar um fragmento de 
dados que tenha sido passado como 
um argumento, você precisa retomar 
o valor alterado da função. Continue a 
leitura para descobrir como funciona o 
retomo de valores! é 
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Tem alguma coisa errada 
com este termostato - 
Estou congelando! 


Estou me 
sentindo ótimo! 


Ah 


Inverno em janeiro: feedback com funções 


Embora o Mandango tenha progredido bastante graças às funções, elas 
não se saíram tão bem na frente de batalha da alteração de temperatura. 
Parece que o termostato JavaScript ainda não está funcionando 
adequadamente, resultando em alguns usuários com frio que agora estão 
ansiosos pelo antigo botão Aquecimento que nunca parou de esquentar. 


funções 


A importância do feedback 


O nosso termostato atual permite definir a temperatura graças aos argumentos de 
função, mas ele não informa a temperatura atual. À temperatura atual é importante, 
porque ela proporciona a base para determinar uma temperatura a ser atingida, Além 
disso, em muitos casos, termostatos diferentes informam temperaturas diferentes, 
mesmo dentro do mesmo espaço. Isso se resume à necessidade de feedback... você 
precisa conhecer a temperatura atual para definir a temperatura a ser atingida. 


À exibição da +emperatura 

atual permite que os usuarios 
he 

a conheçam, para que e es 

passam ajustar o aquecimento 


com mais precisão, 


Agora, o termostato exibe periodicamente a temperatura atual como feedback para 
ajudar a determinar uma temperatuta mais adequada. 


A temperatura 
—> real é retornada 


Temperatura 
real N 


Solicita 
temperatura 


A sunção getfëmp0 é 
chamada para determinar > JetTemp O: 

E cá te À 4 
a temperatura real, — mperatura real € 
netornada pela função, 


Então, precisamos realmente de uma maneira de fazer com que as funções JavaScript 
retornem as informações de volta ao código que as chamou. 


Poder do 
cérebro 


Como você acha que uma função poderia ser persuadida a retornar dados? 
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retornar a quem chama 


Como retornar dados de funções 


Retornar as informações de uma função envolve o uso da palavra-chave return, 
seguida dos dados a serem retornados. Esses dados são, então, retornados ao 
código que chamou a função. 


U o trio) 

ES TU Za ii 
permite retornar um. 

ai fragmento de dados de 


A palavra-chave return O valor de retorno g a 

a 7 
indica gue a função esta pode ser guaissuer uma tunção. 
retornando um valor. dados que você escolher, 


Uma instrução return pode ser colocada em qualquer lugar dentro 
de uma função; apenas saiba que a função sairá imediatamente ao 
encontrar return, Então, a instrução return não só retorna 
dados como também finaliza uma função. Como exemplo, a função 
getTemp () finaliza retornando a temperatura real, de acordo com 
a leitura do sensor. 


function getTemp() ( 


// Lê e converte a temperatura real 


var rawTemp = readSensor(); <— 


Os dados do sensor 
estão em um formato 
var actualTemp = convertTemp (rawTemp) ; estranho e precisam ser 


return actualTemp; convertidas em graus, 


} / 
F À temperatura real é 


retornada da função gue 
USAa instrução return, 


Se você se recordar atentamente, a função get Temp () já foi usada no código do termostato: 


function heat (targetTemp) ( A função selTEmpO fornece o valor 
E que è usado no teste de condição 
itle (getter (} < Cargetians) T para a leap while da beato, 
S i mi 
// Produz algum aquecimento, de uma certa forma 


O valor de retorno de 
} 
x o 
O valor de retorno da função getTemp () substitui uma função substitui a 
a chamada de função get Temp () e se torna parte 


do teste de condição no loop while. chamada para a função. 
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Muitos valores de um retorno feliz 


Já que a instrução return finaliza imediatamente uma função, você pode usá-la 
para controlar o fluxo de uma função, além de retornar dados. Não apenas isso, 
mas é muito comum as funções indicarem seu êxito usando valores de retorno. À 
função heat () apresenta a oportunidade de realizar ambos: 


Lembra-se da variavel actuarfemp? Ela 
E agr apaga fornece o valor de retorno de gettempo, 


if (getTemp() >= targetTemp) é 
Não ha necessidade de produzir 


jo nenhum aquecimento, entao 
while (getTemp() < targetTemp) ( retorna false e finaliza a função, 


// Produz algum aquecimento, de uma certa forma 


ui iss Loo código prados é aguecimentoreal 
TP 50 az 
} que afeta a temperatura e, portarto, 


e e o valor de retorno de setTempo, 


? ga 
Terminado o aguecimento, 


retorna true para indicar êxito, 


A função heat () demonstra como um valor de retorno booleano pode controlar o 
fluxo de uma função e também indicar êxito ou fracasso. Apenas por puro controle 
de fluxo, você pode usar a instrução return sem nenhum valor de retorno como um 
meio de sair do impasse de uma função. Por exemplo, eis uma outra versão da função 
heat () que não conta com o valor de retorno para indicar êxito ou fracasso. 


function heat (targetTemp) ( 
if (getTemp() >= targetTemp) A instrução return interrompe 


Eee a, a função, ja que não ha necessidade 


de nenhum aquecimento, 
while (getTemp() < targetTemp) ( 


// Produz algum aquecimento, de certa forma 


} A função sempre finaliza A instrução return pode ser 
quando Fem que finalizar 
EE sema ajuda i uma 5o usada por ela mesma para 


instrução return, Finalizar uma função. 
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retorno exposto 


Mestre dos padrões 


Entrevista desta noi 


Os segredos de um artista que passa despercebido à função 


Use a Cabeça: Ouvi dizer que você é 
escorregadio, capaz de sair de praticamente 
qualquer coisa. 


Return: É verdade. Coloque-me em qualquer 
função e eu sairei dela num piscar de olhos. Não 
levarei nem mesmo um fragmento de dados 
comigo. 

Use a Cabeça: Para onde você vai quando sai 
de uma função? 


Return: Bem, lembre-se de que as funções 

são sempre chamadas por outro código, então 
retornar de uma função significa apenas retornar 
para o código que a chama. E neste caso, de 
retorno de dados, significa que os dados são 
retornados para o código que chamou a função. 


Use a Cabeça: Como isso funciona? 


Return: Isso ajuda se você pensar em uma 
chamada de função como uma expressão que 
possui um resultado. Sc a função não retornar 
nenhum dado, o resultado da expressão é zero. 
Mas se a função retorna dados, e muitas delas 
retornam, então o resultado da expressão é esse 
fragmento de dados. 

Use a Cabeça: Então, se a função é apenas uma 
expressão, isso significa que você pode atribuir o 
valor de retorno de uma função a uma variável? 
Return: Não c sim. Não, a própria função não é 
uma expressão — é a chamada para a função que 
é a expressão. E sim, você pode e, em muitos 
casos, deve colocar uma chamada de função, 
fazendo com que o resultado seja atribuído a 
uma variável. É onde a expressão entra em cena 
— quando uma chamada de função é avaliada, ela 
é tratada como uma expressão onde o resultado 
é o valor de retorno da função. 

Use a Cabeça: Entendo. Mas o que acontece à 
expressão quando você não retorna nada? 


Return: Se você me usar sem nenhum retorno 
de dados, então a função retorna zero e a 
expressão fica vazia. 

Use a Cabeça: Isso não é um problema? 
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Return: Não, não exatamente. Você precisa se 
lembrar de que as pessoas só se preocupam em 
fazer algo com os valores de retorno de função 
quando elas sabem que a função é capaz de 
retornar dados. Se uma função não pretende 
retornar nada, você não deve se preocupar em 
tentar fazer algo sem um valor de retorno. 

Use a Cabeça: Te peguei! Então, de volta às 
suas habilidades de fuga, não é uma má idéia 
evitar que uma função finalize seu curso natural 
de execução? 


Return: Não, e eis o motivo: só porque uma 
função possui a primeira e a última linha não 
significa que ela é criada para executar cada linha 
de código sempre do início ao fim. De faro, é 
perigoso até pensar em uma função com um 
início e um fim. A finalização “natural” de uma 
função poderia muito bem estar no meio do 
código, graças a um desenvolvedor esperto que 
me coloca no lugar certo. 


Use a Cabeça: Não entendi. Você está dizendo 
que é normal para alguns códigos de função 
nunca serem chamados? 


Return: Eu nunca digo nunca, mas direi que 
normalmente há mais de um caminho até uma 
função e eu, em muitos casos, ajudo a estabelecer 
esses caminhos. Se algo ocorrer, indicando que a 
função não deverá continuar executando, estou 

lá para proporcionar a ela uma saída precoce. 
Em outros cenários, uma função pode executar 
o tempo todo até sua última linha de código e 
sair sem nem mesmo me encontrar, ou ela pode 
finalizar comigo só para que eu possa retornar 
alguns dados. 

Use a Cabeça: Ah, entendi. Você oferece opções, 
ambas em termos de retorno de dados e controle 
de fluxo de execução através de uma função. 
Return: Ei, você está aprendendo! 

Use a Cabeça: É, eu sou assim, bem rápido. 
Obrigado por dedicar seu tempo. 

Return: Sem problema. Tenho que cair fora 
daqui! 


funções 


Parece que o JavaScript foi colocado no meio de um escândalo sobre 
mudança de temperatura. O pessoal do Somos Contra o Aquecimento 
Rápido, ou SCAR, criou um script para promover suas mensagens sobre o 

ias cio aquecimento local. Mas o pessoal do Irritados, mas Cidadãos Responsáveis 
Cansados de Aumentar o Frio, ou ICRCAF, empenhado em abafar a 
mensagem do SCAR, sabotou o código de script. À sua tarefa é separar o 
código bom do ruim e desvendar a mensagem planejada do SCAR. 


function showClimateMsg() ( 
return; 
alert (constructMessage () JF 
} 


function constructClimateMsa () ( 


var msg = 
msg += “Global “; 41 “Local ~“; 


if (getTemp() > 80) 
msg += “aquecimento ce 

else = 
msg += “resfriamento `“; 


if (true) 
msg += “não é”; 
else 
msg += “é “5 


if (getTemp() <= 70) ľ 
return msg + “uma farsa!”; 


else 
return msg + “real!”; 


return “Eu não acredito.”; 


function getTemp() £ 
// Lê a temperatura real 
var actualTemp = readSensor () ; 
Desensor do SCAR., geturn Si; 
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solução do exercício 


Parece que o JavaScript foi colocado no meio de um escândalo sobre 
mudança de temperatura. O pessoal do Somos Contra o Aquecimento 
e Rápido, ou SCAR, criou um script para promover suas mensagens sobre o 
páscoa © aquecimento local. Mas o pessoal do Irritados, mas Cidadãos Responsáveis 
Cansados de Aumentar o Frio, ou ICRCAF, empenhado em abafar a 
mensagem do SCAR, sabotou o código de script. A sua tarefa é separar o 
código bom do ruim e desvendar a mensagem planejada do SCAR. 


Ésse retorno 
evita greo alerta 
apareça sempre. function showClimateMsg() { Ed 
Tenuen ate 
alert (constructMessage () ); plangjado Es 
À assinalado 
function constructClimateMsg () f ims 


var msg = 


tiste codigo é 


E 
satistatorio, ja pi a a OF para marte 
geen Lemperatura lo fora da 
/ 
real € combrolar a if (getTemp() > 80) 
GO dor Paquecinendo “À mensagem, 


comentado 


mensagem, 
else 
msg += “resfriamento *; 


msg += “é 


if (getTemp() <= 70) 2 
return msg + “uma farsa!”; 


Å instrução 
if-else impede gue E 
a função chegue return msg + “real!”; 


4 
até este codigo, J N p 


portanto não ha i 


razão para Hela. temperatura 


function getTemp() { à Peal dò 
// Lê a temperatura rea 
var actualTemp = readSensor(); Sensor, 


return 6&-— actualtemp; 
} 


Tá ficando 
quente dentro 
dessaroupa. 
O Aquecimento Local Socorro! 
é real! 
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Como obter o status de uma poltrona 


De volta ao Mandango, Seth e Jason estão cansados de ouvir 
sobre mudança de temperatura e estão prontos para fazer mais 
algumas melhorias em seu código de script. Alguns usuários 
reportaram a dificuldade em distinguir as diversas cores de 
poltronas e gostariam de poder clicar e pesquisar qualquer 
disponibilidade de poltrona. Parece que o Mandango precisa de 
uma nova função. 


Todo esse papo de 
temperatura está me 
cansando. Eu tenho que mandar 
consertar esse Mandango! 


As poltronas são numeradas da OS 
esquerda para a direita, de cima para 
baixo, começando do zero. 


Número da 
R poltrona O status da | 
poltrona é 
status da ———» —————> retornado 
poltrona Status da 
poltrona 


getSeatStatus (seatNum) ; 


O status da a poltrona é uma string, 
como disponivel, indisponível ou sua 


Imãs da função getSeatStatus() 


+ Está faltando um código importante na função get Seat Status () do Mandango 
que ajuda a descobrir o status de uma determinada poltrona. À função verifica 
primeiro se a poltrona faz parte da sequência de três poltronas marcadas. Se não 
fizer, ela procura a poltrona no array de poltronas para ver se ela está disponível ou 
indisponível. Use os imãs abaixo para terminar os fragmentos de código que faltam. 


function getSeatStatus (seatNum) ( 


return “sua”; 


else if ( 
Length]) 


return “disponível”; 


else 


return “indisponível”; 


você está aqui» 267 


solução dos imãs getSeatStatus() 


(==, Imãs de geladeira da função getSeatStatus() Solução 
S 

m À) Está faltando um código importante na função getSeatStatus () do Mandango 

que ajuda a descobrir o status de uma determinada poltrona. A função verifica primeiro 

se a poltrona faz parte da sequência de três poltronas marcadas. Se não fizer, ela 

procura a poltrona no array de poltronas para ver se ela está disponível ou indisponível. 

Use os imãs abaixo para terminar os fragmentos de código que faltam. 

A variável global sel Seat é -/ Estamas lidando com três poltronas em uma fileira, emtão 


/ a 
prendo nenhuma poltrona esta voce deve verificar essa poltrona e as dvas seguintes. 
marcada, então verifigue-a primeiro, 


else if ( 
return “disponivel”; 
else 


return “indisponível”; 


Descobre a fileira de array da Descobre a coluna de array da 
poltrona dividindo o número de 


Você poderia inserir 9 


poltrona pesando a diferença da 
poltronas na fileira e, em segvida, número de poltramas dividido pelo 
arredondando para um imteiro. número de poltronas na fileira, 


4 
aqui no codigo, mas ele 
irterromperia se voce 
Hivesse alterado o Famanho 


Como exibir o status da poltrona Hs arrayed palco, 


Obter o status da poltrona é útil, mas permitir que o usuário pesquise o status de qualquer 
poltrona exige um meio de mostrar esse status quando o usuário clicar em uma poltrona. A 
função showSeatStatus () fornece uma solução simples para este problema, delegando 
o trabalho pesado para a função getSeatStatus () que acabamos de escrever. 


Passe o número da poltrona para 
gAS eat S tatus para obter o 
status da poltrona, 


alert (“Essa poltrona está “ + getSeatStatus (seatNum) + “.”); 
Concatena as strings 


function showSeatStatus (seatNum) ( 


para criar uma mensagem 
de status. 
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Você pode vincular a função a uma imagem 


Conectar essa função a uma imagem de poltrona na página do A função 
pe SE permite Tao usune pesquise o status da poltrona show Seat StatvsO 
clicando na imagem. imagem precisa ter seu próprio evento E erinida guanda o 


onclick ligado à showSeatStatus (), assim: dr É 
usuario clicar na imagem 


[set23. 
V 


<img id="seat23" src="" alt="" onclick="showSeatStatus (23) ;" /> 


se Mandango - The Macho Mowe Ticket Finder 


onclick! 


Um clique é tudo o que precisa para ver o status de qualquer poltrona na sua caixa 
de alerta, que é útil para qualquer um que tenha problemas com as imagens das 
poltronas, e apenas quer clicar em uma poltrona individual para seu status. 


Qy Pomos de Bata 


a A instrução return permite que as = Uma função só pode retornar um único 
funções retornem dados de volta ao código fragmento de dados. 

ach b ` E 
PREENCHE = A instrução return pode ser usada sem 
= Quando um fragmento de dados retorna quaisquer dados para simplesmente finalizar 
de uma função, ele substitui o código que uma função mais cedo. 


chamou a função. 
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melhorias no código estrutural 


Código repetitivo nunca é bom 


O script do Mandango está funcionando muito bem, 
mas os rapazes estão começando a se preocupar em 
manter o script a longo prazo. Em particular, Jason tem 
feito algumas pesquisas e aprendeu que as modernas 
aplicações da web muitas vezes se beneficiam da 
separação do código HTML, JavaScript e CSS. 


Vejo muitos 
códigos diferentes 
misturados lá dentro. 


<hemi> 
<head> 


Dr le>Mandargo - O localizador macho de ingressos de cinema</vitle> 


<script type="texr/javascripr"> 


function initseats O ( 


function getSeatStatus (seatNum) { 


, 


function showSeatStatus (seatNum ( 
OlerciEssa poltrona está “ + getSeatStatus (seatNum) + =-”); 


$ 


function setSeat (seatHum, status, description) { 
coment potElementById("seat" + seatNum) .Src - “seat + status + ".pno"7 
document -getElementByTd("seat” + seacNum) alt = description: 

, 


function findseats() ( 


o códiso VavaSeript e HTL misturados 
podem ser separados dos atributos 
a HTML do manipulador de eventos. 


5px; text-align:center”> 

src=" alter" onclick="showSeatStatus(0);" /> 

srcan" alt="" onclicke"show5eatStatus(1);" /> 

idevgent2" sro="" alter" onclick="showseatstatus(2):" /> 

idergoat3" src="" alt="” onclick="showseatstatus(3):" /> 

alt="" onclick="showSeatStatus (4/17 /> 

alt="" onclick=-"showSeatStatus(5)7" /> 

alt="" onclick="showSeatStatus (6/17 /> 

SEc="" glt="" onclick-"showSeatStatus (7)17 /> 
Idengoatb” src="" alt="" onclick="showSeatStatus (8);" /><br /> 

id="seat9" alt=" onclicke"showsestStatusi9);" /> 


id="seat10" Alten enciicke"showseatstatus(10):" /> 
4 rs po ea aas 7 = e 
O césio Ienseacil= src="* alt="" onclick-"showSeatStatus (11 
cado Locnseatiza gremn» alt="" onclick-"ehowsestStatus (12177 /> 
À id="seat13" - Snclick-"shouseatStatus (13);" /> 
VavaSerpte jdreseatiam Cqusemtseatus chaos /> 
ra x ig="seat15" Showseatstatus(15);" /> 
RA ig-rseatl7” T ditos. onelick="showseatstatus (17):7 /><br /> 
Vi mados id=-"seatle' alt="” onclick-"showSeatStatus (18) 1» 
Å R; id="seat19" m onelick="showSeatStatus (19);" /> 
em Foda a iderseatz0' alt="" cnclick="showSeatStatus (20); t> 
,, id-"seat21" an alton" onclick="showSeatStatus (21);" /> 
pagina da web idetseat22m click="showSeatStatus(22):" /> 


id-"seat23" "showSsatStatus (2317 /> 
id="seat24" mshowseatStatus (24);" /> 
id="seat25" onelick="showseatStatus (25)17 /> 
idersear2ér Gltena onclick="showSeatStatus (26/17 /><br /> 
idevaeat27" sro="" alt="" onclick="showseat5tatus(27)77 /> 
id="seat29" " altere onclick="showSearStatus(28):" /> 
id="seat29" alter“ onclicke"showSeatStatus(29);" /> 
id="seat30" howSeatStatus(30):” /> 
idorseat31” src=" alt=e"" onclick-"showseatStatus (31/47 /> 
idengeat32" src="" alt="" onclick="showseatStatus(32)4" /> 
idensenta3” srce"" alt=*” onclick="showSeatStatus (33147 /> 
id="geat34" sro="" alt=" onclick-"showseatStatus (34/17 /> 
Idengoatas” src="" alt="" onclick="shouSeatStatus (35) 5" /><br /> 
E ypes"button" id="findseata” value="Find Senta” onclick=rfindSests () +" 
¿div> 


do Mandang. 


1> 
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Como separar a funcionalidade do conteúdo 


Então, qual é o problema de misturar código? Obviamente ele funciona, certo? 

O problema tem mais a ver com a visualização de suas páginas da web movida a 
JavaScript não como páginas, mas como aplicações. E como qualquer boa aplicação, 
as aplicações JavaScript exigem um planejamento e design cuidadosos para o sucesso 
a longo prazo. Mais apropriadas, as aplicações são menos infestadas com bugs e 
mais fáceis de se manter quando há uma separação de conteúdo, apresentação e 
funcionalidade. Mandango apresenta uma fusão obscura de todas as três. 


Separar conteúdo, apresentação 


Ea e funcionalidade +ransforma um KAEREN 
geo problema grande em peguenos e Pe 
ú SE problemas. 
Conteúdo 


Apresentação 
Este é o código Oa mie A Esta é a parte da página em CSS, 


fe utura i A 
que oferece ei tan que melhora o aspecto do conteúdo 
se harmonizar si a be e determina sua aparência, como 
como abrigar dados. fontes, cores e até o layout. 


<script> 


</script> 


Este é o código JavaScript que 
aciona a página e a torna interativa. 
Você pode pensar nessa parte da 
página como a parte que executa. 


Separar a 


Pense sobre a questão da separação do código dessa forma. 


Vamos dizer que Seth e Jason encontraram um script de funcionalidade do 
gerenciamento de poltronas de cinema realmente ágil que P 
eles gostariam de usar no lugar do código. Eles precisariam conteúdo torna as 


reestruturar o Mandango, fazendo com que ele usasse o novo E: mo 

código de script, mas eles teriam que correr o risco de estragar a apl icações da web 
estrutura da página, porque o código JavaScript está intimamente oa PAna? E 
ligado ao código HTML. Seria muito melhor se o código HTML MAIS fáceis de criar 
fosse isolado e a conexão JavaScript-para-HTML ocorresse 

puramente em JavaScript. e manter. 


Poder do 
cérebro 


Como você empreenderia o uso de funções para 
separar a funcionalidade do conteúdo no Mandango? 
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dados = funções 


Funções são apenas dados 


Para separar efetivamente o código, você precisará entender como 
as funções são conectadas aos eventos; até agora, fizemos isso 
usando os atributos HTML. Existe uma outra maneira que muitas 
pessoas consideram de alto nível: misturar os códigos JavaScript 

c HTML. Essa é outra maneira de conectar os manipuladores de 
evento, o que requer uma visão diferente das funções. 


Por incrível que pareça, realmente, as funções são apenas Pi 
variáveis. É verdade. A distorção é que o corpo da função éo é 
valor, enquanto o nome da função é o nome da variável, Eis a 
forma com que está acostumado a visualizar as funções: 


A função é criada 
como sempre, 
function showSeatStatus (seatNum) { 


alert(“Essa poltrona está “ + getSeatStatus (seatNum) + “.”); 
} 


O código funciona bem, mas essa é a mesma 
função criada de uma maneira diferente. 


O nome da função é o & 
À ques nome da variavel. 
var showSeatStatus = function (seatNu : n) 4 
alert (“Essa poltrona está “ + getSeatstatus (seatNum) + 


}; 


o corpo da função é o valor 

da variavel, +ambem conhecido 
como literal de função, quando 
expressado dessa forma, 


Esse código mostra como uma função pode ser criada usando-se a mesma sintaxe 
como uma variável, e até mesmo consistir nos mesmos fragmentos e partes: um 
identificador único (nome de função) e um valor (corpo de função). Quando um 
corpo de função aparece sozinho sem um nome, ele é conhecido como um literal 


de função. 


O que torna essa revelação sobre funções tão interessante é que ela mostra que as 
funções podem ser manipuladas como as variáveis. Por exemplo, o que você acha 
que o código a seguir faz? 


var myShowSeatStatus = showSeatStatus; 


Atribui a Função show Seat Status à 
variavel myShow Sent Status. 
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funções 


Como chamar ou referir-se às suas funções 


Ao atribuir o nome de uma função a uma outra variável, você está dando acesso ao 
corpo da função a essa variável. Em outras palavras, você pode escrever o código 
para chamar a mesma função, dessa forma: 


alert (myShowSeatStatus (23) ) ; Chama a mesma função 
ha O através da variável 
myShow Seat Status, 
O resultado final da chamada de myShowSeatStatus () éo 


mesmo que o da chamada de showSeatStatus (), porque "ÃO é 
ambas as funções, em última análise, referem-se ao mesmo Uma função na 


código. Por esta razão, um nome de função também é conhecido verdade apenas uma 
como uma referência de função. 
94 
variável cujo valor 
é uma referencia ao 
myShowSeatStatus F corpo da função. 


A diferença entre referir-se a uma função e chamar uma função tem a ver com a 
colocação de parênteses () após o nome da função. Referências de função aparecem 
de forma independente, enquanto as chamadas de função são sempre seguidas de 
parênteses e, em muitos casos, por argumentos de função. 


showSeatStatus function() ( 


Executa a Junção 
my Show Seat Status, 
ve € a mesmo que 
shomSeatStatusO, var myShowSeatStatus = showSeatStatus; 
> myShowseatStatus (23) ; 

Atribui uma 
referência de função a 
mpShon Seat Status, 


Analise o código a seguir e escreva o número que aparece na caixa de alerta. 


function doThis (num) { 


3 Tai return num++; 
Exercicio , 


function doThat (num) ( 
return num--; 


var x = doThis(11); CIRO 
var y = doThat; 
var z = doThat (x); 

x = yiz); 

y=x 


alert (doThat iz - y)); 
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solução do exercício 


Analise o código a seguir e escreva o número que aparece na caixa de alerta. 


Solução do 
Exercício 


function doThis (num) į 
return numt+; 


} 


function doThat inum) { 


ATEN Res 
doThis (11) erica 

var x = doThis( E 

var y = doThat; ————> 37 dote) De // 

var z = doThat (x); x= deTuk//32/0 

E Pi =/0 


alert (doThat(z - y)}; 


Leerkeastuail! -/03 


Não existem 


Perguntas idiotas 


P: Separar o conteúdo é tão importante 
assim? 


R: Sim e não. Para aplicações simples não é 
necessariamente errado misturar códigos HTML, CSS e 
JavaScript. Os beneficios da separação do código se tomam 
significantes em aplicações mais complexas que envolvem 
muitos códigos. É muito mais dificil compreender o quadro 
global em grandes aplicações, o que significa que é fácil 
se meter em apuros ao fazer alterações, especialmente 
quando tipos diferentes de código estão misturados. 
Separar o código de forma limpa faz você se sentir mais 
seguro para fazer alterações funcionais sem violar alguma 
coisa na estrutura ou na aparência da página. Isso permite 
também que pessoas de diferentes áreas de especialização 
trabalhem no mesmo projeto. 


Por exemplo, os web designers podem trabalhar na estrutura 
e na apresentação de uma aplicação sem medo de criar 
erros no código funcional do JavaScript, que talvez eles 
não entendam. 


P: Se uma função é apenas dados, como 


posso distinguir uma função de uma variável 
normal? 
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R: A diferença entre uma função e uma variável “normal” 
caracteriza-se pelo o que você faz com os dados. Os dados 
(código) associados às funções são capazes de serem 
executados. Você indica o que deseja para executar uma 
função colocando parênteses após o nome da função, 
inclusive os argumentos se a função exigi-los. 


P: De que adianta as referências de função? 


R: Ao contrário da variável normal, que armazena seus 
dados como um valor em uma área da memória, as funções 
armazenam uma referência ao seu código. Então, o valor de 
uma variável de função não é o código propriamento dito, 
mas uma referência à localização na memória onde o código 
está armazenado. Mais ou menos como o seu endereço de 
correspondência é uma referência à sua casa, não da casa 
propriamente dita. 


As funções usam referências em vez de valores, porque é 
mais eficiente do que armazenar várias cópias do código 
de função. Então, quando você atribui uma função a um 
manipulador de evento, como atribui momentaneamente, 
você está apenas atribuindo uma referência ao código de 
função, não ao código propriamente dito. 


funções 


OK, as referências de função 
parecem muito bem cuidadas, mas 
o que elas têm a ver com 

o conteúdo da funcionalidade? 


*69 [recursos de callback) para funções 


Às referências de função estão intimamente ligadas a uma maneira 
especial de chamar funções que tem a ver com separar o conteúdo 
da funcionalidade. Você conhece a chamada de função a partir do 
seu próprio código do Mandango. 


setSeat(i * seats[i].length + j, “marcada”, “Sua poltrona”); 


status, description) 1 


function setSeat (seatNum, 


Mas essa não é só uma forma de se chamar as funções nos scripts. Um outro 
tipo de função conhecida como função de callback pode ser chamada sem ter 
nada a ver com isso diretamente. 


Poder do 
“BA cérebro 


Como você acha que o Mandango poderia obter vantagens das 
funções de callback? 
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função normal vs. função de callback 


Conversa informal 


Função normal: 


Então, você é o cara que cu sempre ouço falar, 
que não aceita chamadas locais. Qual a razão 
dessa atitude? 


Você quer dizer como o navegador? Realmente 
incomum. Acho que você é um pouco teimoso 
em relação àqueles que conversam com o código 
regularmente. Puxa, seria mesmo uma perda. 
Esqueça! Quem se importa com o que acontece 
fora do script? 


Talvez você tenha uma idéia. Eu gosto de saber 
quando a página carrega ou quando o usuário 

clica ou digita alguma coisa. Então, está dizendo 
que eu não saberia sobre essas coisas sem você? 


Bem, fico contente em saber que afinal de contas 
nós realmente não somos tão diferentes. 


Não me chame, eu chamo você. 
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Conversa desta noite: Fung 


ŞA e callback se confrontam 


Função de callback: 


Não há nenhuma atitude, eu apenas sirvo a uma 
finalidade diferente. Prefiro só ser chamado de 
locais incomuns e distantes. 


Ouça, não tem nada a ver com quem é melhor 
ou pior. Todos nós somos códigos de script, é 
que eu ofereço aos observadores externos um 
meio de acessar o código de script. Sem mim, 
você nunca saberia quando algo ocorre fora do 
script. 


Na verdade, todos. Lembre-se de que a idéia 
central da criação de scripts é oferecer aos 
usuários da web uma experiência melhor. Se um 
script não tivesse nenhum meio de identificar 
eventos fora dele mesmo seria muito difícil 
melhorar a experiência do usuário. 


Tudo bem. O navegador me chama e, em muitos 
casos, eu chamo você, já que responder aos 
acontecimentos externos sempre exige várias 
funçõe: 


Sim. Acho que nos veremos por aí. 


Boa sorte aí. 


funções 


Eventos, callbacks e atributos HTML 


Usamos as funções de callback o tempo todo, as quais são chamadas pelo 

navegador no lugar de seu próprio código. O uso mais comum de funções de 

callback é na manipulação de eventos. O Mandango já conta expressivamente com 

suas funções de callback. Na verdade, as funções de manipulação de evento são a 

base do problema que envolve a mistura de códigos HTML e JavaScript. 

O navegador chama 

intSentsO quando 

a página e carregada, 
À 


Y 


initSeats(); 


od 


showSeatStatus (26) ; 


onclick! 


Essas funções de callback são conectadas aos eventos no código HTML 
da página do Mandango. 


O atributo HTIUL onload € 


usado para conectar a função 
A SER 


<body onload="initSeats() 


<img id="seat26” src="”" alt="” onclick="showSeatStatus (26) ;” /> 


O atributo HTL onie J 
é vsado para conectar a 

função show Seat StatusO 

ao everrto onclick, 


Posso ligar 
de volta? 


Essa técnica de ligar as funções de manipulação de evento aos eventos 
via atributos HTML funciona perfeitamente bem, mas ela tem o 
inconveniente de exigir que o código JavaScript seja misturado com o 
código HTML. As referências de função possibilitam isolar essa mistura 
e separar o HTML e o JavaScript... 
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como evitar HTML com referências de função 


Como conectar eventos usando referências de função 


Em vez de usar um atributo HTML para conectar uma função de callback a 

um evento como um manipulador de evento, você pode atribuir uma referência 

de função diretamente no código JavaScript. Em outras palavras, não há a 

necessidade de se arriscar dentro do código HTML — apenas defina a função de 

callback usando uma referência de função, tudo de dentro do código JavaScript. Não ha 


parênteses apos 
window.onload = initSeats; 4 —— omome da Junção, 
A porque você nao 


Pi Uma referência à função quer executar 
ink SeatsO é Catrisuda a função, apenas 
à propriedade do evento referencia-ia, 
onload, 


O evento onload € 
uma propriedade 
do objeto window. 


Então, definir um manipulador de evento estritamente em código JavaScript 
envolve a atribuição de uma referência de função a uma propriedade de evento 
de um objeto. No caso desse código de manipulação de evento onload, a 
atribuição da referência de função faz com que a função initSeats () seja 
chamada quando o evento for desencadeado. Embora a chamada aconteça 
automaticamente quando o evento é disparado, o efeito é este: 


onload! “ Ph windowonload() ; —~ y initseats() ; 


O evento onload aciona ue ja gre a propriedade é definida 
um manipulador de evemto como uma referência de função, 
atraves da propriedade a função init SeatsO é chamada 
window.onload.. para manipular o evento, 


O lado positivo de usar uma referência de função para atribuir uma função de 
manipulador de evento a um evento é que ela permite separar de forma limpa o 
código JavaScript do código HTML — não há necessidade de atribuir o código 
JavaScript aos atributos de evento HTML. 


TRE A Inpe DR 
boy SAES <body> Ås refêrencias de 


Agora, a tag <body> pode ser apenas a tag <body>, já que o função oferecem 


manipulador de função está conectado estritamente a0 código 


JavaScript. Só precisamos nos certificar de que o código de uma maneira 
atribuição de evento será executado o mais breve possível, o que 
normalmente ocorre no topo da página. conveniente de 


Mas existe um problema. O que acontece se precisarmos passar um ~ 
argumento para o manipulador de evento ajudá-lo a executar sua conectar as funções 
tarefa? Isso não é um problema com o onload no Mandango, mas z 

o evento onclick precisa passar o número da poltrona que foi do manipulador de 
clicada. As referências de função não oferecem nenhum meio de 

passar os argumentos, então precisamos de uma outra opção... evento aos eventos. 
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funções 


Literais de função para o resgate 


O evento onclick das imagens de poltronas 
no Mandango precisa chamar a função 
showSeatStatus () com um argumento (o número 
da poltrona) indicando a poltrona que foi clicada. 
Simplesmente atribuir uma referência à função não passará 
o argumento, o que representa um grande problema, mas 
há uma outra maneira. A solução é usar um literal de função 
como referência de função e, em seguida, chamar a função 
showSeatStatus () de dentro do literal de função. 

O objeto de imagem da poltrona é 

recuperado, fazendo com que sua 

propriedade onclick possa ser 

acessada, 


onclick! 


document .getElementById (“seat26”) .onclick = function (evt) ( 
A 


showSeatStatus (26) ; Pg 
d vA Um objeto de everto € 


p Is 
O literal de função encapsula a 0 Ee al de função € passado automaticamente 
chamada para showSentStatusO, atribuido à propriedade para um manipulador de 


permitindo gue um argumento seja do everto onclick como uma 


a ~ evemto como seu primeiro 
passado para ele. referencia de função, 


argumento, 


O literal de função é usado estritamente como um encapsulador de 

chamada para a função showSeatStatus (), mas ele interpreta Literais de função 
um papel importante permitindo-nos passar o número apropriado da 

poltrona à função. Você pode pensar no literal de função como uma permitem eriar 
função sem nome que manipula o evento. Por esta razão, os literais 

de função são muitas vezes chamados de funções anônimas. funções anônimas 
Esse código revela como o JavaScript oferece um objeto de evento 

que é passado para os ra de evento, neste caso através de manipuladores 
do argumento evt. O objeto de evento contém informações 

específicas para cada evento diferente, Neste caso, não precisamos de evento. 

saber nenhuma informação detalhada sobre o evento. Portanto, não 

tem problema não usar o argumento evt. 


Conecte a função initSeats () ao manipulador de evento onload, 
mas dessa vez use o literal de função em vez de uma referência de função. 


EGNI pra ES ao o E e e 
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solução do exercício 


Conecte a função initSeats () ao manipulador de evento on load, 
mas dessa vez use o literal de função em vez de uma referência de função. 


sblução do 
Exercício 


A 


A tunção init SeatsO é chamada o argumento ev+é ignorado, ja 
dertro do literal de Sunção da gre o manipulador de everrto onload 
não precisa do objeto de evento. 


manipulador de evento onload. 


Onde está a conexão? 


Ainda existe uma questão não resolvida relacionada à conexão 

do evento através dos literais de função. Sabemos que o 0) manipulador de 
manipulador de evento onload só pode ser atribuído no topo 

da página dentro da tag <script>, como no código de script evento onload é um 
normal. E isso funciona bem, porque o código ligado a onload 

ão executa mesmo depois que a página é carregada (quandoo excelente lugar-para 
evento onload é disparado). como se tivéssemos usado aantiga | o o 1o 

abordagem de atribuir initSeats () ao atributo HTML onload inicializar todos os 
da tag <body>. Mas onde outros manipuladores de evento de 

literal de função são conectados? eventos. 


A resposta retorna à função de callback do manipulador de evento, 
que serve como um ótimo lugar para conectar todos os eventos de 
uma página. 


window.onload = function() ( Todos os outros eventos na 


7 
// Conecta outros eventos aqui pagina podem ser conectados 
a — rei dentro do manipulador de 
evemto onload, 


// Inicializa as aparências das poltronas 


initSeats () ; 
dg O código especifico para o everto 
4 7 


onload € sempre executado 
dentro do manipulador de evento, 


O que este código resume é que o manipulador de evento onload se torna uma 
função de inicialização de evento onde todos os outros eventos em uma página são 
definidos. Então, o manipulador de evento onload não só desempenha as funções 
normais de inicialização da página, como inicializar as poltronas, como também 
conecta todas as outras funções de callback do manipulador de evento da aplicação. 
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P. Por que as funções de 
callback são importantes? 


R: As funções de callback são 
significativas porque elas permitem reagir 
a algo que ocorre fora do seu código. 
Em vez de chamar uma função do seu 
próprio código, você cria uma função 
de callback que está essencialmente de 
prontidão esperando que algo aconteça 
para que ela possa agir. Quando esse 
algo ocorre, é responsabilidade do 
navegador permitir que a função de 
callback saiba que ela pode executar. 
Tudo o que você faz é preparar o terreno 
conectando a função de callback a um 
acionador, normalmente um evento. 


E: Existem funções de callback 


diferentes dos manipuladores 
de evento? 


à 


document.get 


4! Conecta os event 


eofitonto seu Lápis 


window.onload = function() ( 
4) Conecta o evento de botão Encontrar 


Não existem 
Perguntas idiotas 


R: Sim. Exploraremos um outro uso 
comum de funções de callback no 
Capítulo 12, quando elas serão chamadas 
para processar dados enviados pelo 
servidor em uma solicitação de dados 
que utiliza Ajax. 


E: Eu ainda estou confuso em 
relação aos literais de função. 
O que eles são? Por que são 
importantes? 


R: Um literal de função é apenas um 
corpo de função sem nome, mais ou 
menos parecido com um fragmento de 
dados literal, como um número ou string 
Os literais de função são importantes 
porque eles são ideais em situações 
onde você precisa de uma rápida função 
de callback isolada. Em outras palavras, 
a função só é chamada uma vez, e não 


funções 


pelo seu código. Então, você cria um 
literal de função e o atribui diretamente 
a uma propriedade de evento, em 
vez de criar uma função identificada 
e atribuir sua referência. Isso é muito 
mais do que uma questão de eficiência 
na codificação, aproveitando-se do 
fato de que não precisa de uma função 
oficialmente identificada em algumas 
situações. E lembre-se de que os 
literais de função só são realmente 
necessários quando precisar fazer mais 
do que simplesmente referir-se a uma 
função, como passar um argumento a 
uma função. 


Poltrona 


os de imagem de poltrona 


Experimente escrever um pedido usando um formulário de 
pedidos HTML de Howard. Não se preocupe, você não será 
cobrado pelo anúncio de banner! 


function(evz) { 


document .getElementById(" 


tunction(evt) i 


document. getElementById ("seat 


= functiontevt) £ 


document. getElementById ("seat 2 
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solução inteligente 


Aponte seu Lápis 
Y p 


Solução Experimente escrever um pedido usando um formulário de 
pedidos HTML de Howard. Não se preocupe, você não será 
cobrado pelo anúncio de banner! 


Todo manipulador de À função Sind SeatsO está 

f 
everto onload € um ligada ao evento onclick gue usa a 
literal de função. referência de uma função. 


window.onload = functiont) ( 
4) Conecta o evento de botão Encontrar Poltrona 


onclick 


document „getElementById("findseats") B do = 


j/ Conecta os eventos de imagem de pam 
” my, anche: 
document .getElementById( seat"). 9? Es 

lementById ("seatl" em a 


Er 


document.getE 
document .getElementById("seat2”) 


J/ Inicializa as aparências das poltgonas 


ASeatsO) 


show SeakSfatusO é 
A propriedade onclick de cada chamada de dentro de um 
A Função init Seats0 é agem de poltrona ĉ acessada — Iferal de Função, de modo 

para definir os manipuladores 


ada aiik que um argumenta possa 
o onclick, 


ser passado para ela. 


chamada para terminar 
as tarefas de onload. 


Qy Pontos de Bala 


= As funções de callback são chamadas pelo 
navegador em resposta às situações que 
ocorrem fora do script. 


a As referências de função permitem 
conectar as funções do manipulador de 
evento no código JavaScript sem alterar 
o código HTML. 


= As referências de função podem ser 
usadas para atribuir funções como se 
elas fossem variáveis. 


a Os literais de função são funções sem 
nome úteis em situações onde uma 
função identificada não é necessária. 
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funções 
Não existem 
Perguntas idiotas 


P: Por que o manipulador de evento onload 
no Mandango é criado como um literal de 


função? 


R: Porque realmente não há nenhum motivo para criar 
uma função identificada para isso. A função só é chamada 
uma vez e em resposta ao evento onLoad. Poderiamos 
facilmente ter criado apenas uma função identificada e 
atribuído sua referência a window.onload, mas a 
conexão entre a função de callback e o evento fica mais 
óbvia quando a função está diretamente ligada ao evento 
usando um literal de função. 


P: As outras funções de callback têm que 
estar conectadas ao manipulador de evento 


onload? 


R: Sim. Talvez vocë pense que poderia conectá-las 
diretamente no interior da tag <script> no topo da 
página. Mas lembre-se de que o conteúdo da página ainda 
não terminou de carregar. Portanto, todas as chamadas de 
getElementById () fracassariam e os manipuladores 
de evento não seriam conectados. O manipulador onload 
garante que a página seja carregada. 


O shell de uma página HTML 


Separar o código JavaScript do código HTML no Mandango revela o quanto a parte 
estrutural da página se torna verdadeiramente mínima. Isso torna o código HIML 


muito mais fácil de manter sem a preocupação de atropelar o código JavaScript que 


poderia interromper a aplicação. <body> 
<div style="margin-top:75px; -alignie E 
Sing iderseatdo mrecno aptesa y3 0 On Centerco 
<img seati" src=" alte"" j> 
<img id="seat2" srcane altam" /> 
<img 1d="seat3" sre=n" altenn js 
<img ide"seat4” sro="" alten" /> 
<img 
<img 
<img i 
<img 
<img 


P Iha só esse <img ! 

Cara, preciso de Olhe R 
A i código! É tão <img id="seatll” src=» al 

uma foto disso! ig a E e A 


fácil de manter. 


<img id="seat13" sro="" slt: 
<img id="seat14" src=e"" alten" /> 
o <img id="seat15% sro="" 
E P <img id="seat16" sro="" 
<img id="seat17" src=ma alt=e"" 7> 
<img id="seat18" src. / 
<img ide"seat19" sro 
<img ide"seat20" src="" alten" /> 
<img id="seat21" src="" al > 
<img id="seat22" srcent altar /> 
<img ide"seat23" srcmm" alten" /> 
<img id="seat24" sromta alten" /> 
<img ide"seat25" srcemm alten" /> 
<img id="seat26" srce" alte"" /> 
<img id="seat27" sr. altere /> 
<img at28" src=" altar /> 
<amg seat29" src=" fode /> 
<img id="seat30” src="" "J> 
<img id="seat31" sro="" "j> 
<img id="seat32" sr 
<img id="seat33" sro="" 
<img id="seat34” sr 
<img ide"seat35" src="" 7> 
<img id-"seat36” src="" altemm /> 
<img id="seat37" sri alt=”" /> 
<img id="seat38" sr alte"» /> 
<img id="seat39" s: alte"" />chr /> 
<input types" id=" ats" 
caput type="button" id-"findseats" value="Find 
</body> 


JavaScript funcional 


Um pequeno passo para o JavaScript... 


Embora não tenhamos conseguido solucionar a paz mundial, demos um passo na 
direção certa usando o JavaScript para compreender a mudança de temperatura. 
Transformar grandes problemas em pequenos, concentrar-se na singularidade 

do objetivo e lutar pela reutilização do código são formas de melhorar os scripts 
através das funções. 


Abrigo 


E, obviamente, Seth e Jason colocaram as 
mesmas técnicas de solução de problemas pára 
funcionar criando uma versão do Mandango 
mais bem organizada e mais fácil de manter. No 
mínimo, o mundo dos frequentadores machos de 


Agora estou em paz 
com o Mandango. 


Estou sentindo isso. 


cinema está em paz... 


tita 


As Poltronas de 1 a 3 na Fileira 4 estão disponíveis, aceita? 


Comer) 


\ 
N- fileira dianteira! 
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funções 


Cruzadas do JavaScript 


Muito Bem, chegou o momento novamente. 
Preencha as respostas da cruzadinha baseado 


nas declaraões a seguir. 


Horizontal 


3. Ao atribuir uma função a uma variável, usa-se 
de função 

5. Funções ajudam a eliminar esse tipo de 
código. 


uma. 


6. Nunca chame esse tipo de função. 

10. Um corpo de função sem nome, 

12. Quando o código é relativamente fácil de 
modificar, ele é considerado de boa .... m 
13. O código HTML representa essa parte de 
uma página da Web. 


Vertical 


1. .... agora está em paz com o Mandango. 

2, As funções melhoram a ........... do código para 
que você não o copie desnecessariamente. 

4. O JavaScript representa essa parte de uma 
página da Web. 

7, Para passar os dados de volta a partir de uma 
função, apenas ...... -os, 

8. Um fragmento de código JavaScript 
reutilizável. 

9. As funções são excelentes para eliminá-los. 
11. É como você passa os dados para uma 
função. 
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solução da Cruzada do JavaScript 


R Solução da Cruzada do JavaScript 


'P 
R 
o 
B 
E 

e | 

M 

A 


[a] 
p 
e 
w 
[o jo j> |N 
A 
a 
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funções 


ME ooro cna 
mm Ó que as funções agregam à be ço 
alinhar os dois o | 2,49 / , / J 
cérebros e resolver Vida de seu JavaScript? PÇA 


a charada. NAS 


B €———— E um encombro de mentes! < B 


A paz é putos uma proposta delicada. 
Mesmo com e código JavaScript, 
semente o mais organizado dos 
códigos leva à trangiiilidade e 
ao sossego. 
Não é fácil levar uma vida de 
satisfação, pelo menos em termos de 
JavaScript- 
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7 formulários e validação 


* Como Fazer o Usuário 


Eu gostaria de saber se minha 
personalidade cortês e gentil será 
suficiente para conseguir o número de 
telefone de Betty... procuro alguma 
validação aqui. entende? 


Você não precisa ser cortês ou furtivo para conseguir 


informações bem-sucedidas dos usuários com o JavaScript Mas 
tem que ser cuidadoso. Os humanos têm a estranha tendência de cometer erros, o que significa que você 
não pode sempre contar com os dados fornecidos nos formulários on-line como sendo precisos. Inicie 
o JavaScript. Transmitindo os dados através do código certo do JavaScript como se 
estivessem sendo digitados, você poderá tornar seus aplicativos Web muito mais confiáveis 
e também retirar um pouco de carga do servidor. Precisamos economizar a largura da 


banda preciosa para coisas importantes, como, por exemplo, vídeos com retardo e imagens de 
bichinhos de estimação bonitinhos. 


* Dizer Tudo 


campos de dados do banner 


Bannerocity: mensagens aéreas amistosas 


O aviador perito e adorável Howard transformou seu amor pelo vôo em um 
negócio de banner aéreo, Bannerocity. Howard deseja dar um significado 
inteiramente novo ao termo “anúncio de banner” pegando pedidos on-line 
para os banners aéreos. Além de dar início a seu novo negócio, Howard 
espera que o sistema de pedidos on-line libere seu tempo para que ele possa 
passar mais tempo divertindo-se com vôos amistosos. 


Howard conseguiu 

um negocio 

impressionante com RE 
seu classico avião da Atualmente, o Formulario de 
II Guerra Mundial, pedidos em papel de Howard 


captura todas as informações 
f necessárias para o pedido de 
banner aéreo. 


É muito importante para o formulário de 
pedidos on-line Bannerocity capturar todas 

as informações de pedidos associadas a um 
pedido de banner aéreo. Howard calcula que 
o formulário de pedidos on-line deve incluir 
todos os campos no formulário de papel, mais 
um campo de e-mail, uma vez que os clientes 
estarão preenchendo o formulário on-line. 


Me: Duncan Giutenberg 


Mensagem CEP 
ibida no 
A mensagem a ser ex” á á 
anúncio de banner aéreo. A área geográfica onde a 
mensagem será exibida. Howard 
Data do vôo voa sobre uma área postal 


específica ao exibi igi 
A data na qual o anúncio de exibir um anúncio. E-mail 


banner é mostrado no ar. O cudére 
o de e-mai] é 
Número de telefone $º de e-mail do cliente. 
Homo O número de 
O nome do cliente. telefone do cliente. 
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formulários e validação 


Formulário HTML Bannerocity 


Com um pouco de ajuda do HTML, a primeira tentativa de Howard em um 
formulário de pedidos on-line para o Bannerocity parece ótima. 


epe a —  Bannerocity - Personalized Online Sky Banners so 
N 
> BANNEROCITY 
De L[BANNERO CITY] 
Enter the banner message: [ 


Enter ZIP code of the location: 
Enter the date for the message to be shown: 


Enter your name: 
Enter your phone number: 
Bise yaramata o 


Order Banner 


Oba, o formulário de 
pedidos on-line parece 
[= realmente bom. 


O novo pedido Bannerocity excelente tem todos os campos 
do formulário necessários e está prónito para pegar os pedidos 


sem usar nenhum código JavaScript. Qual é a desvantagem? add 


Faça downlad en 


wiw, ratem m 
Comece a lrabalhar! Waltaboak com br e Howa id ha algy 


A 


Aponte seu Lápis 


N Experimente escrever um pedido usando um formulário de 
pedidos HTML de Howard. Não se preocupe, você não será 
cobrado pelo anúncio de banner! 


Enter the banner message: I 


Enter ZIP code of the location: 
Enter the date for the message to be shown: 


Enter your name: 
Enter your phone number: 
Enter your email address: | 
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solução inteligente 
fonte seu Lápis 
" Solução 


Você mão sabia, mas Howard ja bia 

pode exibir apenas 32. Nimeros demais no codigo postal 
caracteres em seu banner DONS AT = devem ser apenas cinco, | 
aéreo, portanto este é 

muito comprido. V 


Enter the banner message: [Mandango...o Es rig qa 


Enter ZIP code of the location: | 100012 
Enter the date for the message to be shown: | 11 de março de 2009 E 


Enter your name: |Seth Tinseiman 


Experimente escrever um pedido usando um formulário de 
pedidos HTML de Howard. Não se preocupe, você não será 
cobrado pelo anúncio de banner! 


Enter your phone number: | (212) 555-5339 


Enter your email address: | sethtomandango 


7 

Éste e um endereço de 
7 7 

e-mail invalido — esta 


O número de telefone A data não está 


leia neme saltando a extensão deve estar na forma no formato IAS. 
aiii E por FREAR DD) PAAR que a 


exempla . formulario espera, 


*, sem parênteses. 


Quando o HTML não é suficiente 


Como os formulários on-line são tão bons quanto os dados 
fornecidos, Howard percebe que precisará da ajuda do JavaScript 
para assegurar que os dados do formulário sejam confiáveis. 

E ele precisa ajudar a esclarecer para o usuário o que são 
exatamente “dados bons”. Por exemplo, sem um tipo de dica da 
página Bannerocity, o usuário não tem nenhum indício de que há 
um limite de 32 caracteres na mensagem de anúncio de banner 
ou que a data deve ser fornecida como MM/DD/AAAA. 


Enter the banner message: 'Mandango... o localizador de assentos de cinema para caras fortes! 


Com aiguma ajuda do ema Não, os Lormularios HTL não 

JavaScript estes dados 4 ai J i / 

inválidos podem ser evitados! RM AMARES 
Há um pequeno problema. Todo código JavaScript inteligente de manipulação de 
dados no mundo não pode ajudar Howard até que ele descubra como ter acesso 
aos dados do formulário a partir do JavaScript... 


Desculpe-me, há um 

limite de 32 caracteres 

no texto de anúncio do 
banner. 
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formulários e validação 


Como acessar os dados do formulário 


Para acessar os dados que foram fornecidos em um formulário, O nome do atributo 


primeiro é necessário identificar com exclusividade cada campo identifica com 

em um formulário. Isso é lidado no código HTML, usando um exclusividade 

dos dois atributos (ou ambos!). Um campo em um 
formulário, 

O atributo id identifica com <input id="zipcode” name="zipcode” type="text” size="5" /> 


exclusividade gualguer elemento 
7 
em uma Pagina, 


Ambos os atributos 
servem como identificadores 
Enter ZIP code of the location: [100012 para o campo de emtrada. 
A razão para as duas abordagens diferentes da identificação para os campos do 

formulário tem relação com o modo como os campos são acessados. A primeira 

abordagem usa a função getElementById( ) que é usada para acessar 

qualquer elemento em uma página. Essa abordagem funciona bem, mas há uma 

mais simples que é específica para os campos do formulário. 

Todo campo do formulário tem um objeto do formulário que pode ser transmitido 

a qualquer função que é chamada para validar os dados do formulário. 


<input id="zipcode” name="zipcode” type="text” size="5” onclick="showIt ( 


O bom do objeto form é que ele também é um array que mantém todos os 
campos no formulário. Mas os itens no array não são armazenados usando índices 
numéricos; ao contrário, são armazenados usando o seu identificar exclusivo como 
definido no atributo name! Portanto, se o objeto form for transmitido para uma 
função como um argumento denominado the Form, o valor fornecido no campo, 
do código postal poderá ser acessado assim: 


O valor do 
campo do 
câdiço postal 
e exibido, 


/ 


E 


O nome do argumento do 
objeto do formulario. 


function showIt(theForm) { 100012 


H 
O nome exclusivo do campo do 
formulário, como definido no Queremos o valor 
atributo name da +as <input>, annarenada no campo, 
não o campo em si. 
Esta abordagem para acessar os dados do formulário não é melhor nem pior que 
usar getElementById( ),a não ser que torna o código mais fácil de ler, 
uma vez que envolve uma menor quantidade. O objero form fornece um atalho, 
portanto, você também pode usá-lo. 
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quando validar 


P: Por que um campo do formulário individual 
tem acesso ao objeto form? 


R: Algumas vezes não tem, mas lembre-se de que um 
campo do formulário é capaz de chamar uma função de 
validação que precisa acessar os dados nos outros campos 
do formulário. Neste caso, o objeto form disponivel em 
cada campo torna-se a chave para acessar de modo 
conveniente os outros campos do formulário. Este objeto é 
geralmente transmitido à função de validação para que ela 
possa obter rapidamente qualquer campo necessário. O 
exemplo Bannerocity continua a depender muito do objeto 
do formulário para acessar os campos em seu formulário 
de pedidos. 


Não existem 
Perguntas Idiotas 


P: Então, o valor é uma propriedade de um 
campo do formulário? Isso significa que 
cada campo do formulário é realmente um 
objeto? 


R: Sim e sim. Cada campo do formulário é representado 
por um objeto para o código JavaScript e o objeto form 
fomece um modo rápido e fácil de acessar tal objeto 
para qualquer campo em um formulário. Assim que 
tiver um objeto do campo do formulário em mãos via 
form[“objectname”], poderá então acessar seu 
valor adicionando a propriedade va lue. Você aprenderá 
tudo sobre os objetos nos Capítulos 9 e 10. 


Sei o quanto é importante acessar os 
dados do formulário no JavaScript para 
assegurar que os dados sejam bons. Mas 


Saber quando verificar os dados do formulário 
depende de escolher o evento correto de entrada 


do usuário para lidar. 


À resposta para o “quando” na validação dos dados envolve 

os eventos e compreender qual evento permite que você 

saiba quando o usuário forneceu dados em um determinado 
campo. Em outras palavras, o desafio é responder ao evento 
que é inicializado imediatamente depois dos dados terem sido 
fornecidos. Mas a pergunta ainda permanece... qual é o evento? 
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como se sabe quando verificá-los? 


formulários e validação 


Os campos do formulário seguem uma cadeia de eventos 


Quando os dados são fornecidos em um formulário, uma torrente de eventos é gerada. 
Você pode usar esses eventos como um ponto de entrada para validar os dados campo 
por campo. Mas fazer isso envolve dar uma olhada na sequência típica de entrada e 
compreender exatamente quais eventos são iniciados... e quando. 


O Selecione o campo de entrada (onfocus). Fornecer dados 
O Forneça dados no campo. em um formulário 
O Deixe o campo de entrada para ir para o próximo inicia uma cadeia de 
(onblur/onchange). = 
eventos JavaScript 
O Selecione o próximo campo de entrada (onfocus). 
interessantes. 


Forneça dados no campo... 


O onfocus! E 
E lizador de assentos de cinema para caras fortes! 
Enter the banner message: | Mandango... O localizador por Ta 


Enter ZIP code of the location: | 100012 «O ontocus! Oii 
Enter the date for the message to be S n: 
Enter your name: 


Enter your phone number: na QD 


O evento onfocus é iniciado quando um campo é selecionado 
pela primeira vez para a entrada, ao passo que onblur é iniciado 
quando um campo perde a seleção de entrada. O evento onchange 
é parecido com onblur, exceto que será inicializado apenas se o 
campo perder a seleção de entrada e seu conteúdo tiver sido alterado. 


Poder do 
cérebro 


Enter your email address: 


Qual evento faz mais sentido para validar 
um campo de dados do formulário? 
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estou vendo coisas? 


Como perder o foco com onblur 


Embora haja um argumento a ser criado para usar o evento 


O evento onblur 


onchange para a validação dos dados, há um problema em 
particular no sentido de que não podemos usá-lo para validarum é um inicializador 


campo vazio. À razão é que nada existe quando um formulário é 
carregado pela primeira vez, mas como os dados do formulário 


perfeito para a 


não mudaram também, onchange não será inicializado mesmo E Ea 

que um usuário navegue os campos vazios do formulário. O evento validação dos dados. 
onblur resolve esse problema sendo sempre inicializado quando 

uma seleção de entrada, ou o foco, deixa um campo. 


onfocus! 


Enter your name: 


O ca 
mpo de texto ganha o foco de entrada 
gando o usvario clica-o ca; 


M à mos, 5 
Para ele com Lab usando E) ads 


feclado, 


O campo de mensagem 
ganha o foco de entrada, 


4 
Mada é fornecido no 
Campo do name, 


onblur!.. 


O campo de mensagem 
perde o foco de entrada, 


Diferente de onchange, onblur é iniciado sempre que um campo perde o foco, 
mesmo que os dados não tenham sido tocados. Isso significa que onbl ur é muito 
poderoso, mas também que você deve ter cuidado com como e quando irá notificar 
o usuário sobre os problemas da validação dos dados. Um exemplo característico... 


a caixa de alerta, que pode ser uma proposta fácil, 


da validação. 


mas arriscada, para a notificação 


Não existem 
Perguntas idiotas 


P: Alguns eventos não são gerados quando 
o usuário realmente fornece os dados do 
formulário? 


R: Sim. Vários eventos são gerados em resposta a 
teclas pressionadas, como, por exemplo, onkeypress, 
onkeyup, onkeydown etc. Embora existam certamente 
situações nas quais faz sentido responder a esses eventos, 
geralmente eles não são boas idéias para validar os dados, pois 
O usuário normalmente ainda está no meio do fornecimento 
das informações quando esses eventos são inicializados. 
Validar os dados usando esses eventos seria um tanto 
arrogante, notificando o usuário sobre cada erro tipográfico 
e parte não terminada de dados quando eles estão sendo 
fornecidos. Provavelmente, é melhor aguardar até que os 
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usuários deixem um campo, que é uma indicação de que 
terminaram de fornecer os dados. E isso é feito respondendo 
ao evento onblur. 


P: onblur parece um nome estranho para um 
evento. O que significa? 


R: A idéia é que onblur deve ser o correspondente de 
onfocus. Portanto, se onfocus é iniciado quando um 
elemento ou campo do formulário ganha o foco de entrada, 
então onblur é iniciado quando um campo perde o foco. 
Mesmo que a palavra “foco” neste contexto não esteja referindo- 
se exatamente à visão, a palavra “blur” é usada para indicar a 
falta de foco. É uma brincadeira do JavaScript com as palavras 
que acaba sendo um pouco confusa. Apenas se lembre que 
onblur é iniciado quando um campo perde o foco. 


formulários e validação 


Você pode usar uma caixa de alerta para validar as mensagens 


As caixas de alerta são de fato úteis para exibir rapidamente informações para o usuário e elas 
representam a forma mais simples de notificação para permitir que o usuário saiba que algo 
está errado com os dados do formulário. Apenas chame a função alert ( ) enquanto lida 
com o evento onblur, caso um problema seja detectado nos dados do formulário. 


Verifique para saber se o campo 

~ ~ as 
Uma função de validação 4 do Formulario está vazia, 
chamada para validar os 


dados do nome, 


function validateNonEmpty (inputrield) i 


|| Veja se o valor de entrada contém texto 


if (inputField.value. length == 0) 1 


4 Os dados são inválidos portanto notifique © usuário 
HH 


alert (“Please enter a value.”): 


Lnstrvi o 

1 
usuario sobre 
como remediar o 


return false; 


problema, 
return true; 


Please enter a value. 


Como a campo do nome esta 
vazia, um alerta é exibido, 


engporto seu Lápis 


Quantos eventos onblur são gerados pela seguinte sequência de entrada? 
Quantos eventos onchange? Não se preocupe com onfocus. 


Enter your name: | Seth Tinselman 


Enter your email address: |” sethtOmandango 


O número de eventos onblur:.. 


O número de eventos onchange: .. 
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onblur e onchange - confronto 


Aponte seu Lápis 
~ Solução 


Quantos eventos onblur são gerados pela seguinte seqüência de entrada? 
Quantos eventos onchange? Não se preocupe com onfocus. 


Enter your name: | Seth Tinselman 
Enter your phone numbeff 


Enter your email address: | setht@mandango 


O número de eventos onblur: .... 


O número de eventos onchange: .... 


Conversa informal 


e 


onblur: 


Atualmente, parece que os scripts estão sempre 
preocupados com o que cabe ao usuário. 
Imagino que é onde você e eu entramos. 


É algo que venho querendo conversar com você. 
O boato é que havia alguns dados vazios por aí e 
muitos dedos apontaram na sua direção. 


É verdade. Ninguém está questionando sua 
confiabilidade sobre quando os dados mudaram. 
O problema é: o que acontecerá se um 
formulário iniciar com dados vazios que nunca 
mudarão? 
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Conversa desta noite: onblur e onchange conversam . 
sobre quando reagir aos dados ruins do formulário 


onchange: 


Está certo. Somos uma dupla, sempre é bom 
deixar alguém saber quando um elemento ou 
campo do formulário perde o foco, alguns dados 
mudaram... ou ambos! 


Francamente, estou um pouco chocado com a 
acusação. Você sabe que eu nunca perco uma 
oportunidade de notificar um script sobre os 
dados que mudaram. 


onblu 


É verdade, não faz nenhum sentido e nem para 
alguns usuários, mas eles fazem isso do mesmo 
modo. 


Acalme-se, está tudo bem. Não é sua culpa. Veja, 
não é sua responsabilidade preocupar-se com 

os dados que nunca mudam. Lembre-se de que 
você tem o nome onchange. 


Não nos deixemos levar. Como eu estava 
dizendo, não é sua responsabilidade. Portanto, 
se um script estiver preocupado em validar um 
formulário para assegurar que os campos não 
fiquem vazios, realmente não deve usar você 
para iniciar o código de validação. 


Ouça, tento não reagir tanto. Mesmo que você 
não possa ser ideal para iniciar o código de 
validação, isso não significa que os scripts não 
estejam interessados algumas vezes nos dados 
sendo ou não alterados. E o formulário que 
permite que as pessoas editem os dados que 
são armazenados? Faria muito sentido permitir 
apenas uma gravação se os dados realmente 
tivessem mudado. 


Realmente! Portanto, não há nenhuma 
necessidade de se alarmar. 


De nada. Tudo bem, eu adoraria conversar mais, 
porém tenho alguns dados para validar...até logo! 


formulários e validação 


onchange: 


Você está dizendo que um usuário é capaz de 
tentar enviar um formulário com campos em 
branco? Isso não faz nenhum sentido. 


Tudo bem, então um formulário inicia em 
branco com campos vazios. O usuário pula 

a entrada de alguns dados e o envia com os 
campos ainda vazios... ah, cara, acho que estou 
começando e ter um ataque de pânico! 


Mas e a situação sobre a qual acabamos de falar 
onde falho miseravelmente no script com dados 
vazios e o mundo começa a ruir? 


Bem é um alívio, mesmo que não signifique que 
eu não posso servir para ninguém mais. Espere, 
acho que o pânico está voltando de novo... 


Ei, é verdade. Então você está dizendo que ainda 
tenho uma finalidade? 


Obrigado. Isso é muito tranquilizador. 
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continue, não há nada para ver aqui 


Verificando... algo 


De volta ao Bannerocity, Howard sabe que no mínimo precisa validar o formulário 
Bannerocity para assegurar que todos os campos renham dados. Mas de um ponto 

de vista JavaScript, isso envolve ver as coisas de uma perspectiva estranha. Mais 
especificamente, ao invés de verificar para saber se um campo tem algo, você precisa 
verificar e ver se o campo não tem nada. Em outras palavras, “algo” é igual a “nada”. 


Algo = Nada 


O motivo para este pensamento complicado é porque é mais fácil verificar um campo 
do formulário para ver se está vazio do que “não-vazio”. Portanto, uma primeira linha 
de defesa para obter a validação dos dados envolve verificar para saber se um campo 
está preenchido. 


Não-vagio. 


Seth Tinselman 


Enter your name: 


Enter your phone number: 


Vazio, 


A função de validação de Howard deve responder ao evento O campo do formulário é 
onblur de cada campo do formulário para executar a identificado com exclusividade 


validação do preenchimento. Por exemplo: para gue possa ser acessado 


a partir de outras partes do, 
script. 


<input id="phone” name="phone” type="text” size="12” 


onblur-"WANIdaACENONENDEVIERIS) 
A função 
o objeto do campo do formulário pi rE Je 
é transmitido para a função chamada em resposta 
usando a palavra-chave Lhis, & onblur para verificar 
ever se o campo está 
preenchido, 


A palavra-chave this é usada neste código para fazer referência ao 
próprio campo do formulário. Transmitir o campo do formulário como 
um objeto para a função de validação dará à função uma oportunidade de 
acessar o valor do campo do formulário, assim como o objeto form que 
mantém todos os campos do formulário, o que algumas vezes é útil. 
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Valide os campos para assegurar que você “não tem nada” 


Cada campo do formulário tem um código parecido que liga o evento onblur à função 
validateNonEmpty ( ). Ligando o evento onblur de cada campo à função 
todos os dados do formulário serão validados. 


<input id="name” name="name” t ="text” size="32" 


cobro > 


4 f - 
O campo do formulario phone campo do formpléria éar 


number chama à função de 
validação para saber se ha um 
número de telefone. 


chama a Junção de valido 


a, ão 
Para saben se há um a 


function validateNonEmpty (inputField) ( 


A propriedade 
length revela 

; 
© numero de 
caracteres em 


uma string, 


se o valor de entrada contém texte 


4! Veia i 
i » número de caracteres em uma string: 


A propriedade length mostra 


utField.value. Length == 0) ( 


if (inp ; 
atidos, portanto notifique o usuário 


4! Os dados são invi 


alert (“Please enter a value.")i 


return false; 


a pa exibe um 


ide alerta e retorna 


false. 


Please enter a value. 


4 
Ha vm nome, portanto 


a função Simplesmente 
retorna true. 


E 


Neste exemplo, os valores de retorno da função validateNonEmpty ( ) não são 
usados. Sua finalidade é comunicar ao código que chama o resultado da validação: true se 
os dados forem OK ou false se não. Um pouco mais tarde, veremos como esses valores 
de retorno são usados para assegurar que os dados do formulário sejam bons antes de enviar 
um formulário para o servidor para o processamento. 


Uma função de validação Poder do 

preenchida verifica para vas 

assegurar que os campos alerta para notificar o usuário sobre os dados ruins do formulário? 
não foram deixados vazios. 


Você pode pensar em alguma desvantagem ao usar uma caixa de 
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não perturbemos os usuários 


Validação sem caixas de alerta desagradáveis 


Não levou muito tempo para Howard perceber que as caixas 

de alerta não são ideais para notificar o usuário sobre os dados 
inválidos. Ele está tendo muitas reclamações sobre todas as caixas 

de alerta que surgem quando os usuários estão tentando fazer os 
pedidos Bannerocity. Todos ficamos um pouco condicionados a ser 
incomodados quando uma janela pop-up interrompe uma experiência 
on-line e a validação dos dados não é diferente, mesmo que as caixas 
de alerta, neste caso, estejam tentando ser úteis. Ustra temido Hru L 
A solução de Howard é um “sistema de ajuda passivo”, que não fornece um lugar para 
envolve caixas de alerta e, portanto, não interrompe o fluxo de entrada exibir as mensa gens de 
dos dados. Porém, essa abordagem passiva para notificar o usuário 
requer adicionar alguns elementos HTML novos ao formulário. 


Enter your phone number: I Please enter a value. 


O novo elemento de ajuda HTML representa uma grande melhoria em Um segundo 

relação às caixas de alerta, pois não fica no caminho e ainda transmite as ar jument pa maio SER 
mesmas informações para o usuário. E tudo que requer estruturalmente é o validafeMonimpt,O, 
acréscimo de uma tag <span> HTML que é nomeada para coincidir com — agora, segue junto 

o campo do formulário 20 lado. Essa nova tag <span> aparece no código com o elemento do 
do formulário da página Web logo abaixo do campo de entrada. texto de ajuda. 


ajuda da validação, 


<input id="phone” name="phone” type="text” size="12" 
lidateNonEmpty (this, document .getElementById (*BRBREIRSIE'»)” /> 


<span ia- BEBE” ciass-"nerp”></span> 


[3 A classe de estilo é usada para 
formatar a texto de ajuda em 
A tag o uma fome rbálica vermelha, 


inicialmente esta embora seja dificil ver o vermelho 
vazia, mas ela nesta pagina impressal 


Hem um ZD) gee a A 
associa ao campo do ` Stes dois Ds +êm gue coincidir 


formulário phone para que o Fexta de ajuda seja 
exibido para o campo de entrada, 


onblui 


number. 
Com o elemento span colocado mantendo o texto de ajuda, tudo que está faltando 
é o código que, de fato, exibe a mensagem de ajuda. E com base no segundo 
argumento para a função validateNonEmpty ( ), há uma boa chance de que 
a função será responsável por assegurar que o texto de ajuda seja visto pelo usuário. 
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Um validador não-vazio mais sutil 


A solução da mensagem de ajuda passiva engenhosa de Howard mostra- 
se em uma nova função validateNonEmpty ( ) melhorada que, 
agora, também lida com a tarefa de definir e limpar as mensagens de 
ajuda para um campo do formulário. 


O objeto do texto de 
ajuda é transmitido 
paraa função como o 
segundo argumento, 


function validateNonEmpty (inputField, helpText) i 
Primeiro, 
certifigue-se de 
gre o elemento do 
texto de ajuda 
exista Chelpfext l= 
nul), emfão defina 
sua propriedade 
innerHTML paraa 
mensagem de ajuda, 


11 Veja se o valor de entrada contém texto 


if (inputField.value. length == 0) { 


// Os dados são inválidos, portanto defina a mensagem de ajuda 
if (helpText != null) 
helpText. innerHTML = “Please enter a value.”; 


return false; 


} 


else ( 


// Os dados são bons, portanto limpe a mensagem de ajuda 


if (helpText != null) 


Também é importante 
limpar o texto de 
ajuda assim que os 
dados fiverem sido 
fornecidos em um 
campo do formulário, 


helpText.innerHTML = “”; 


return true; 


É muito melhor... 
nenhuma caixa de 
alerta... menos intrusivo. 


A validação dos dados no Bannerocity, agora, está muito melhor 
graças à nova abordagem de ajuda passiva, que ainda usa uma 
boa dose de JavaScript, mas de um modo muito mais claro, pelo 
menos em termos de aperfeiçoar a experiência do usuário. 


Enter ZIP code of the location: [Please enter a value. 
Enter the date for the message to be shown:| Please enter a value. 
Enter your name: [semm 

Enter your phone number: Please enter a value. 


Enter your email address: Please enter a value. 


Quando os dados estiverem 
faltando, agora o Bannerocity 
exibirá apenas uma mensagem 
de ajuda passiva. 


Os dados do nome estão 
presentes para que a mensagem de 
ajuda não seja mostrada, 
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Isto funciona bem? 


Algo bom demais 


Como resultado, a validação do preenchimento funciona bem, mas dados demais 
podem ser tão problemáticos quanto dados de menos. Verifique o último banner de 
Howard, que mostra um novo problema no formulário de pedidos Bannerocity. 


Apenas parte do texto de anúncio do 
A / 
banner e exibida no banner aeres... Seth 


no e ason não estão comtemtes! 


asse" 


i de 
Ei, o que está errado, o localizador 
rapazes? 


Não sei, mas o aviador 
Howard terá uma 
mensagem de texto 
com muitas palavras! 


Cara, onde está o resto 
de nosso banner? 


Poder do 
cérebro 


O que está errado com este banner e o que 
pode ser feito para resolver o problema? 


304 Capítulo 7 


formulários e validação 


O tamanho importa... 


O problema com o Bannerociry é que o banner aéreo de Howard O usuário forneceu texto 
pode manter apenas 32 caracteres, mas o campo de mensagem demais, mas o Sainer ER 
no formulário de pedido não tem limite. Certamente, é bom que 

o usuário seja avisado se não puder fornecer uma mensagem, 

mas uma mensagem que é longa demais ainda passa sem nenhum 
problema. E isso é, na verdade, um grande problema para Howard! 


Enter the banner message: | Mandango... o localizador de assentos de cinema para caras fortes! 


Coma na mais Lexto 
do que o banner pode 
marter, o texta do 
anuncio € cortado... 
não € bom! 


nao o informow sue Eum 
Problema, 


dango... 


man 


Tentar mostrar um texto ilimitado em um espaço limitado não funciona e acaba 
resultando em clientes infelizes... como Seth e Jason. A solução é validar o campo Este texto do 


de mensagem para que ele tenha um comprimento máximo, Uma mensagem de A 
Sra pare] P ag banner esta 


ajuda mais personalizada para a nova validação também é uma boa idéia para 

assegurar que os usuários compreenderão o limite de tamanho da mensagem. dembro do 
limite de 32. 
caracteres, 


Enter the banner message: | Mandango... ingressos para o ime maro mM 


mandango, 


O texto cabe bem no a Pa 


banner quando ele € 
limitado dentro do 
+amanho maximo, 


dote seu Lápis 


Escreva o pseudocódigo que mostra como uma nova função de 
validação do comprimento do Bannerocity funcionará, validando 
os comprimentos mínimo e máximo. 
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o longo e o curto 
Aponte seu Lápis 
œ% Solução 


Escreva o pseudocódigo que mostra como uma nova função de 
validação do comprimento do Bannerocity funcionará, validando 
os comprimentos mínimo e máximo. 

Os argumentos da Função minLength e 

mixLength seriam definidos para / e 32 

para o texto da banner Bannerocity. 


„L4 Qielale is shorter than, 
Show, the help 


Como validar o comprimento dos dados 


O papel da nova função validateLength( ) é verificar 
e ver se o valor em um campo do formulário segue certos 
comprimentos mínimo e máximo. No caso do Bannerocity, 

a função é basicamente usada para limitar o comprimento do 
campo de texto do banner, embora aplique um comprimento (mi nLength, 
mínimo de um caractere também. É improvável que Howard validateLength (n T A. 
encontre um cliente que queira anunciar uma letra L apenas, por maxLength, npp tran 
exemplo, mas a idéia principal é assegurar que não haja mais de 


nelprext) ; 
32 caracteres e não menos que um. 


Além dos comprimentos mínimo e máximo a serem aplicados maxLength 
porvalidateLength( ),a função também requer mais A quantidade máxima do tex 
dois argumentos para o campo de entrada ser validado e o Permitido no campo de e; ad 
elemento do texto de ajuda usado para exibir uma mensagem de atrada, 
ajuda. Isso dá um total de quatro argumentos para a função. ya 


Enter the banner message: | Mandango. o localizador de assentos de cinema para caras fortes! Please enter a valve 1 to 32 characters in length. 


minLength inputField helpText 


7 : O campo de id: O elemento no qualo 
quant dade mínima de texto campo de entrada papas 
5A i z campo de entrada cujo comprimento texto de ajuda é exibido. 
requerido no camp! está sendo validado. 


<input id="message” name="message” type="text” size="52" 


onblur="[ 


i 
<span id="message help” class="help”></span> 

A função validateLength ( ) obtém o valor do argumento 

inputField e verifica para assegurar que tenha, pelo menos, O objeto do campo de 

minLength de comprimento, porém não mais que maxLength. embrada da mensagem 


Se o valor for curto ou longo demais, uma mensagem de ajuda será de banner. 
exibida no elemento helpText na página. 
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Q Pontos de Bala 


a Todo campo do formulário é acessível 


m As caixas de alerta são um modo 


como um objeto JavaScript. desajeitado e geralmente chato de 

= Dentro de um objeto do campo do notificar os usuários sobre os problemas 
formulário, há uma propriedade chamada de validação dos dados. 
form que representa o formulário = Uma abordagem passiva para a ajuda 
inteiro como um array de campos. de validação é muito mais fácil e menos 


= O evento onblur é iniciado quando o foco confusa para os usuários. 
de entrada deixa um campo do formulário = A propriedade length de uma string 
e é uma ótima maneira de inicializar uma mostra o número de caracteres nela. 


função de validação de dados. 


ag seu Lápis Termine o código da função val idateLengtn( ), 


prestando muita atenção nos argumentos sendo transmitidos. 


function validateLength (minLength, maxLength, inputField, helpText) ( 
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solução inteligente 


Aponte seu Lápis 


N 


Veritigue os 
comprimentos 
minimo € 
máximo do 
valor do 


Solução “Termine o código da função validateLength( ), prestando 
muita atenção nos argumentos sendo transmitidos. 


function validateLength (minLength, maxLengrh, inputField, helpText) ( 


campo do 
7 
formulario, 


Defina a O A pi 


mensagem de 
ajuda para 
refletir o 
problema do ™ 
comprimemto 
do campo, 


Limpe o qe 
khak S 


ajuda se o 
comprimento é 
do campo for 


bom, 


O problema da mensagem resolvido 


Howard está aliviado pelo problema do comprimento do Agora, o texto de RR 
banner ter sido resolvido. Sem dinheiro para comprar um 
banner maior, ele não tinha nenhuma outra opção boa, 
portanto atacar o problema no nível JavaScript acabou sendo 
uma boa idéia. Pelo menos agora os usuários conhecem logo os 
limites dos banners Bannerocity antes de fazer os pedidos. 


chama uma mensaçem de 
banner gue excede o limite, 


Enter the banner message: Continue sua aventura com a Aventura do Bonequinho! Please enter a value 1 to 32 characters in length. j 
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P. O que realmente está errado 
com a validação da caixa de 
alerta? A maioria das pessoas 
não percebe que uma caixa 
de alerta não é um anúncio 
pop-up? 

R: Embora provavelmente seja verdade 
que a maioria das pessoas percebe que 
a caixa de alerta JavaScript não é um 
anúncio pop-up, ainda não eimina o fato de 
que elas são vistas como sendo altamente 
intrusivas. Qualquer coisa que requeira 
que o usuário pare o que está fazendo 
e dique em algo em outra janela é uma 
interrupção. Portanto, embora as caixas 
de alerta tenham um lugar na programação 
JavaScript, a validação dos dados não. 


P: O uso de this no código 
onblur para os campos do 
formulário é ainda confuso. 
O campo do formulário é um 
objeto ou o próprio formulário 
é um objeto? 


R: A resposta é ambos. Dentro do 
contexto de um elemento HTML, a palavra- 
chave thi s refere-se ao elemento como 
umobjeto. Portanto, no caso de um campo 
do formulário, thi s é uma referência para 
o objeto do campo do formulário. Dentro de 
um dado objeto do campo do formulário, 
há uma propriedade chamada form 
que fomece acesso ao formulário inteiro 
como um objeto. Portanto, quando você vir 
this. formno código onblur para 
um campo do formulário, o que realmente 
está vendo é uma referência para o próprio 
formulário, como um objeto. 


A finalidade de this.formno 
código Bannerocity é ter acesso ao 
elemento do texto de ajuda associado 
a um determinado campo de entrada. 
Lembre-se de que this. form é 
uma referência para o objeto form, que 
também é um array associativo contendo 
todos os campos do formulário. Portanto, 
você pode acessar rapidamente um 
campo denominado my field usando 
a notação do array com o código this . 
form[my field'] Você poderia 
também usar getElementById ( 
J. mas a abordagem do formulário é um 


Não existem 
Perguntas idiotas 


Piquando umetemento do texto 
de ajuda está associado dentro 
de um campo de entrada, qual 
é o significado dos atributos 
name e id de cada um? 


R: O id de um elemento do texto 
de ajuda é baseado no id /name 
de seu campo de entrada associado, 
mas não é exatamente o mesmo. Mais 
especificamente, o ID do texto de ajuda 
usa o ID do campo de entrada com o 
texto he 1p adicionado ao final. O motivo 
dessa convenção de nomenclatura é criar 
uma conexão limpa e consistente entre 
um campo de entrada e o elemento que 
exibe o texto de ajuda para o campo. Na 
verdade, você pode nomear os IDs do 
elemento do texto de ajuda como quiser, 
contanto que sejam exclusivos e sejam 
devidamente transmitidos para as funções. 
de validação. 


P. Por que é necessário limpar 
a mensagem de ajuda quando 
os dados são validados como 
sendo bons em uma função de 
validação? 


R: Lembre-se de que a finalidade do 
texto de ajuda é fomecer ao usuário ajuda 
quando há um problema. Se os dados 
fomecidos em um campo do formulário 
forem bons, não haverá nenhum problema 
e, portanto, nenhuma razão para exibir 
uma mensagem de ajuda. E como uma 
mensagem de ajuda já pode estar visível a 
partir de uma validação anterior no mesmo 
campo, a cautela é limpar a mensagem de 
ajuda sempre que um campo é validado 
com dados bons. 


P: O que acontecerá se um 
elemento do texto de ajuda 
não for fornecido como um 
argumento para uma função de 
validação? 
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R: O script pesquisa e pesquisa o 
elemento ausente, superaquece a página 
e deixa uma bagunça queimada no 
navegador. Tudo bem, não é realmente 
assim. Segundo a construção, o sistema de 
ajuda passiva no Bannerocity desaparecerá. 
silenciosamente se o argumento do texto 
de ajuda não for usado em uma função de 
validação. Portanto, o texto de ajuda para 
o campo de entrada simplesmente não 
é mostrado, Isso significa que o sistema 
do texto de ajuda é designado a ser 
inteiramente opcional. O que é bom nessa 
abordagem é que ela permite ao texto de 
ajuda ser usado tanto quanto for desejado; 
até com os campos individuais, você não 
é obrigado a adicionar um elemento do 
texto de ajuda para cada campo em um 
formulário. 


O código de validação que venfica para 
saber se o argumento htmlText 
não é nulo é o que permite ao elemento 
do texto de ajuda ser opcional. Se o 
elemento do texto de ajuda não for nu 11, 
significará que o elemento existe e o texto 
de ajuda poderá ser exibido. Do contrário, 
simplesmente não faz nada porque o 
elemento está faltando. 


P.oatributo sizedeum campo 
do formulário HTML não limita o 
comprimento do campo? 


R; Oatibuto si ze HTML imita apenas 
o tamanho físico do campo do formulário 
na página — ele não tem nenhuma relação 
com quantos dados são fornecidos. Como 
exemplo, o campo do código postal no 
Bannerocity tem seu atributo s i ze defini- 
do para 5, o que significa que o campo tem 
otamanho na página para aceitar cerca de 
cinco caracteres de texto. É possível imitar 
o comprimento real do texto no HTML 
usando o atributo maxlength, mas 
não há nenhum minlength equiva- 
lente, Uma função de validação fomece 
uma maior flexibilidade ao controlar o 
comprimento dos caracteres que podem 
ser fomecidos em um campo, embora no 
caso de um código postal, realmente seria 
melhor não apenas procurar os cinco car- 
acteres de texto, mas também assegurar 
que sejam cinco números. Talvez, seja algo 
que Howard deva considerar acrescentar 
ao Bamnerocity... 
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você está em? 


Banner certo, lugar errado 


O formulário on-line de Howard continua a causar problemas apesar de seus melhores 
esforços de validação. Desta vez, um código postal foi fornecido incorretamente, resultando 
em Howard voando várias horas sobre o lugar errado. Talvez pior que o tempo perdido de 
Howard seja o seu cliente infeliz, Duncan, que perdeu algumas vendas de donuts. 


Enter ZIP code of the location: |74121 


Uma letra L 
maiúscula é fornecida 
as invés do número 
sA mas far mal 
interpretada como o 
numero f. 


Ha ha, eu não poderia ter 
planejado nada melhor... O 
banner de Duncan está sendo 
mostrado no local errado! 


Nesta situação, o erro humano soma-se ao erro da entrada 
dos dados e cria uma bagunça realmente grande. O cliente 
digitou sem querer I a0 invés do número 9, uma vez que E 


as teclas estão próximas no teclado. Howard interpretou I o Você se 
como 1 e acaba anunciando o banner sobre o lugar errado. lembra do 
Frankie, o 
Poder do EN vingador do 
cérebro cachorro- 
Como você validaria um código postal? verte de 
mean? 
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Como validar um código postal Wenk ernt 


O problema de Howard tem relação com um 
código postal não sendo fornecido devidamente. 


Simplificando, um código postal nos Estados Unidos 
consiste em exatamente cinco números. Portanto, 
validar um código postal pode ser tão simples quanto (076 i 


assegurar que o usuário forneça cinco números 
exatamente... nada mais, nada menos. 


37205 
ara N 


Longo demais, 


ok! 


# HHHH 
“o Exatamente GÀ pro by 
Curto demais. 


cinco numeros. 


ME eegporto seu Lápis 


Termine o código para a função validateZIPCode ( ) que valida 
os códigos postais para assegurar que eles tenham exatamente cinco 
caracteres de comprimento, assim como sejam numéricos. 


function validateZIPCode (inputField, helpText) ( 
// Primeira veja se o comprimento do valor de entrada é algo diferente de 5 
dE: fo 
7 
if (helpText != null) 
helpText.innerHTML = “Please enter exactly five digits.”; 


// Então, veja se o valor de entrada é um número 


BLA É, Lao E gta arco in mtoo E G 
// Os dados são inválidos, portanto defina a mensagem de ajuda 
if (helpText != null) 

helpText.innerHTML = “Please enter a number.”; 


else ( 
// Os dados são bons, portanto limpe a mensagem de ajuda 


if (helpText != null) 
helpText. innerHTML = “”; 
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solução inteligente 
Aponte seu Lápis 
~ Solução 


Veja se o comprimento 
a string do codigo 
postal è aljo 
ditereme de ŞS. 


function validateZIPCode (inpu! 
// Primeira veja se o comp: 
ie cinpotFieldvalvelençtilo S 4 
// Os dados são inválidos, portanto defina a mensagem de ajuda 
if (helpText != null) 
nelpText.innerHTML = “Please enter exactly five digits.”; 


«4 Retorne false uma veg pve o comprimento 

> e do codigo postal não € exatamente S . 

ži Então, veja se o valor de entrada é um número Aima 

erse it (158MMimputFielA valve) S 1 tehat K 
// Os dados são inválidos, portanto defina a mensagem de ajuda 


if (helpText != null) verifica para 
helpText. innerHTML = “Please enter a number.”; saber se um 


7 
cefuon false, E Retorne false uma ves que o codizo valor é Nota 
Z Z 


Termine o código para a função validateZIPCode( ) que 
valida os códigos postais para assegurar que eles tenham exatamente 
cinco caracteres de comprimento, assim como sejam numéricos. 


ield, helpText) į 
ento do valor de entrada é algo diferente de 5 


} 
else { 
7! Os dados são bons, portanto limpe a mensagem de ajuda 
if (helpText != null) 

helpText. innerHTML = “"; 


ceturn teve; C Retorne true para indicar pres códiza 


postal é validado como sendo bam, 


postal não é um numero, Number, 


méricos. 


Nem sempre é seguro supor que os códigos postais 


Preste atenção! Se um formulário Web for capaz de receber códigos postais para os endereços 

fora dos Estados Unidos, então validar um código postal puramente numérico 
não será uma boa idéia. É porque muitos outros países contam com códigos postais que 
contêm uma mistura de letras e números. E mais, os códigos postais nos Estados Unidos 
realmente consistem em 9 dígitos na forma # # * # #-# # # #, neste caso o hífen tornaria 
os dados do código postal não numéricos. 


apenas 
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formulários e validação 


As funções de validação Bamnerocity são realmente 
ótimas, mas o que acontecerá se o usuário 
ignorar as mensagens de ajuda e clicar o botão 
Order Banner (Pedir Banner) com dados ruins? O 
formulário ainda será enviado para o servidor? 


Os dados ruins nunca devem ter sucesso no servidor. 


Nossa! Todo o có 


o de validação dos dados no mundo não importaria se 
o usuário puder evitá-lo clicando um botão ou enviando o formulário apesar 
das boas intenções. A falha fatal do Bannerocity é que ele não sujeita os 
campos do formulário à validação antes de enviar o formulário e é por isso 
que os dados ruins do formulário são capazes, atualmente, de ser enviados 
para o servidor. 


Nenhuma validação dos dados i 


importará se a vsvario tiver 
2 opção de ignora 


a-la € enviar a formulário com dados ruins. 


Bannerocity - Personaliz 


CS ABANNEROCITY y 


value 1 to 32 characters in length. 


Presse entor a 


er message: | 
cida — please enter a valvo. 


Enter the date for the message to be Shown“ | Ploaso ontor a value. 


Enter ZIP code of the location: i 


Please enter a value, 
Enter your name: | aey: a value. 

Please enter 
Enter your phone number: De Piease enter a value. 


Enter your emai E Order Ban na Die 


Done Ee O sotão Order Banner precisa 


Um aplicativo realmente de alguma validação antes 
completo também Validaria de transmitir os dados do 


os dados no Servidor 


1 
formulario para o servidor. 
PENEI por Segurança, 


Bannerocity precisa de outra função e seu serviço é validar todos 
os campos do formulário antes de enviá-lo para o servidor para 
o processamento. À função placeOrder ( ) personalizada é 
ligada ao botão Order Banner e é chamada para fazer uma ronda 
final da validação antes de completar o pedido. 


<input type="button” value="Order Banner” onclick 


i (tio Lora): 
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faça seu pedido e pesquise 


Um foco na função 
placeOrder( ) 


A função espera gue um objeto da 
formulário seja Lransmibido como sev 
Única argumento para gue possa acessar 
os campos individuais do formulario. 


function placeOrder (form) { 


if (validateLength(1, 32, 


/i Envie o pedido para o servidor 
form.submit( ); 


} else ( 


form[“message”], form[ “message help”]) && 
validateZIPCode (form[“"zipcode”], form[“zipcode help”]) && 
validateNonEmpty (form["date”], form[“date help”]) 46 
validateNonEmpty (form[“name”], form[“name help”)) 44 
validateNonEmpty (form[“phone”], form[“phone help”]) && 
validateNonEmpty (form[“email”], form[“email help*])) í 


E ado formulário para o servidor se os campos da 


Cada campo do formularis e elemento 
do texto de s ajuda é acessado, 
através do objeto do formulário 
usando a notação do array. 


À maior parte da 
função é vma grande 
€— instrução mleise pre 
chama as funções de 
validação em cada campo 
do formulário, 


O método submit ) será chamado para enviar 


1 
formulario forem validados como sendo bons, 


alert (“I'm sorry but there is something wrong with the order information.”); ~ 


j NL Um problema de validação ao fazer 
um pedido € é muito importante para 
justificar uma caixa de alerta, 


Não existem 
Perguntas Ídiotas 


P: Como a função placeOrder ( ) controla seo P: Achei que as caixas de alerta fossem ruins 


formulário é enviado ou não para o servidor? 


R;Aprincipio, ainstução i £/e1 se na função é estruturada 
para que a condicional envolva uma validação de cada campo 
no formulário, que significa que se qualquer dado do formulário 
for inválido, a cláusula e1se será executada. A cláusula 
el se contém apenas uma chamada para a função alert ( 
) , portanto nada mais acontecerá se a função tiver sucesso 
nessa cláusula. Por outro lado, se os dados forem validados 
como bons, o método submit ( ) será chamado no objeto 
form, que envia o formulário para o servidor. Portanto, o 
envio do formulário para o servidor é controlado chamando ou 
não o método submit ( ) do formulário. Esse método é o 
equivalente JavaScript de um botão de envio HTML. 
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para a validação dos dados. Qual é o plano? 


R: Em muitos casos elas são, mas o problema real aqui é 
quando é bom interromper o fluxo de uma página para exibir 
uma mensagem pop-up (alerta), solicitar que o usuário leia 
uma mensagem e clique em OK. Como o botão Order Banner 
é clicado apenas quando o usuário tem a intenção enviar 
um pedido, vale a pena assegurar que ele saiba que há um 
problema com os dados. Portanto neste caso, o problema é 
grave o bastante para que um alerta seja adequado. E não se 
esqueça de que as mensagens de ajuda passivas são ainda 
exibidas para ajudar a guiar o usuário em uma correção. 


formulários e validação 


O tempo é tudo... na validação da data 


Infelizmente, as correções de validação do código postal e de envio do formulário 
de Howard fornecem apenas uma sensação passageira de alívio porque agora há 
um problema inteiramente novo. Ele não voa mais sobre o lugar errado graças 
aos códigos postais validados, mas agora ele anuncia algumas vezes os banners na 
data errada, o que talvez seja ainda pior. Algo que está errado com as datas do vôo 


fornecidas... 4 
Um erro Hipogratico 


resultou em uma data 
contenda a letra a ao 


A. invés deum 9... parece que 
ninguem pode digitar um 9 
Ene te dato tor re message o shown: [0871072008 jj) corretamente, 


Howard irterpretov a letra 
o como um zera € voou no dia 


(O ao invés do dia /9, 


Bem, hoje é segunda- 
feira e não vejo nenhum 
sinal de meu banner! 


4 


ES 


Sp Poder do 


OA cérebro 


Como Howard poderia validar o campo do formulário da 
data do vôo para que as datas fiquem de acordo com um 
padrão específico, como, por exemplo, MM/DD/AAAA? 


Elite não é uma chembe feliz, 
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problemas com a data 


Como validar uma data 


Howard aparentemente não conseguirá apenas verificar para saber se o usuário 
forneceu dados no campo da data — ele terá que verificar, de fato, para saber se 
uma data válida foi fornecida. O segredo para validar uma data é decidir por um 
formato de data específico e, então, aplicá-lo. Um formato de data comum envolve 
especificar o mês com dois dígitos, então o dia com dois dígitos, depois o ano com 


quatro dígitos, separados por barras. 
O ano consiste em quatro 


M M/D DIYYYY €——— caracteres... detestariamos 
criar um problema do Lipo YIK! 


O mês e o dia / Cada parte da Enter the d 

4 ate for the message to be shown: 
consistem em dois data € separada [05710/2008 
caracteres cada, por uma barra, 


Fechar um formato com uma data é a parte fácil... no código para validar 

uma parte dos dados com esse formato é onde as coisas ficam complicadas. 

Há algumas funções de string poderosas que possibilitam dividir uma string 

com base em certo caractere como, por exemplo, uma barra. Mas é um feito 0 “05/10/2008” 
bem complexo separar uma string em partes e, então, analisar cada uma para 

assegurar que seja numérica e esteja de acordo com certo comprimento. E 

um tipo de desafio de validação do código postal levado ao extremo. 

Vejamos as etapas de como uma função de validação da data poderia 

funcio 


“05” “lo” 2008” 


Divida o valor do campo do formulário em uma coleção de 


“057 is caracteres 
substrings, usando uma barra como a base para separar a 03 e Dois a 


E um numero. 


string, ok 

Analise a substring do mês para assegurar que tenha © 

exatamente dois caracteres de comprimento e que sejaum — < „ 1o” 

número. o Ro Dois caracteres 
T mas não é 2 


Analise a substring do dia para assegurar que tenha 


7 
exatamente dois caracteres de comprimento e que seja um PME ANRE Ps, 


“2008” problema! 


© © © ©: 


número. 

Analise a substring do ano para assegurar que tenha n [4] bia 

same quatro caracteres de comprimento e que seja na naeilarese bi 

um número, + 

(5) número... OK. 
(5) Ignore qualquer outro dado após a segunda barra. 

Embora esta série de etapas não seja necessariamente aterrorizante da T A CS Nestum dada 
perspectiva da codificação, parece haver muito trabalho para validar um posterior. 
padrão relativamente simples. 
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formulários e validação 


Não seria um sonho se houvesse uma maneira 
melhor de validar os dados do que dividir as 
Strings... Uma garota pode sonhar, não pode? 
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você não ouviu falar sobre essa expressão? 


As expressões regulares não são “regulares” 


O JavaScript tem uma ferramenta predefinida extremamente poderosa chamada 
expressão regular que é designada especificamente para coincidir os padrões no 
texto. Uma expressão regular permite criar um padrão e, então, aplicá-lo em uma 
string de texto, pesquisando uma coincidência de modo muito parecido com um 
suspeito em uma formação policial... mas com figuras mais cooperativas! 


Não se preocupe... 
Estou sempre pronto 
Parece ser um caso Não vejo nenhum paro ce prona. 
de altura, estilo de motivo para isto. 
cabelo e visão... Quando posso sair? 


Deve haver Tenho um álibi aqui! 
alguma confusão. 


Padrão = Alto, sem óculos, cabelo curto 


Uma coincidência! 
O padrão envolve os 
atributos fisicos de 
uma pessoa, 


Uma expressão regular 
é usada para coincidir os O padrão descreve as propriedades fisicas de uma 


pessoa que são, então, coincididas com a pessoa real. 
padrões no texto. As expressões regulares permitem a você fazer o 
mesmo tipo de coincidência de padrão com as strings. 
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formulários e validação 


As expressões regulares definem os padrões a coincidir 


Exatamente como um padrão para uma formação policial pode envolver a altura, 
estilo do cabelo e outros atributos físicos de uma pessoa, um padrão de texto envolve 
certa sequência de caracteres como, por exemplo, cinco números em uma linha. 
Espere, parece um padrão familiar... um código postal, talvez? » a 
Padrão envolve uma 


Padio = HAHAHA O regência temas 
digitos numéricos 
\ exatamente, 


Contem uma letra. Uma coincidência! 


N 


Poucos digitos. 


“A3492” “5280” “37205” 


“007JB” “741265” 


É si 


Comém letra 6 is, 


Infelizmente, transformar um padrão de cinco dígitos para um 

código postal em uma expressão regular não é simples. É porque A string deve iniciar com o 

as expressões regulares contam com uma sintaxe muito compacta da diferente 
e um pouco enigmática para descrever os padrões do texto. Não 
é fácil ver imediatamente se essa expressão regular pode ser usada 4€ 
para coincidir com um código postal de cinco dígitos: O único digito deve 


repetir $- vezes, 


VE 
Padrão = /^\d{5}$/ 


padrão definido, na o 
um digito é permitido. 


Quieto. Estou tentando 
ver um padrão. 


E = ) 
Todas as expressões 4 
z h pr i nico dbeth 
regulares m Unico digito Å strin 15 deve 
entre barras. numerico, +erminar com 
este patrão, 


Não entre em pânico se esta coisa de expressão 
regular parecer um pouco opressiva. 


Fará muito mais sentido quando virmos alguns 
exemplos práticos de validação. 
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a divisão da exprossão regular 


Expressões regulares expostas 


Criar uma expressão regular é como criar uma string literal, exceto que a expressão 
regular aparece entre barras (//), ao invés de aspas ou apóstrofos. 


/ $ + ) Expressão l +4 L /_ | As expressões regulares 
sempre iniciam e 
No Duas barras são usadas para A terminam com uma barra. 


conter uma expressão regular, 


Dentro da expressão em si, uma coleção de símbolos especiais, conhecidos como 
metacaracteres são usados com letras e números para criar padrões de texto 
altamente descritivos. O bom é que não é necessário conhecer cada nuança da 


“linguagem” da expressão regular para criar expressões regulares práticas. À seguir, 
estão alguns metacaracteres da expressão regular mais usados: 


4 
dim, € apenas um ponto, O espaço em branco inclui 
E dna as espaços, tabulações, 
e novas linhas e retornos, 
Coincide com qualquer caractere, Ñ s 
exceto uma nova linha. Coincide com um caractere 


de espaço em branco. 


pe EEE A string Sendo 
coincidida não pode 
A string deve iniciar fer nenhum texto 
com o padrão. antes do padrão, 


\d ar 
Coincide com qualquer 


dígito numérico. Muitos metacaracteres iniciam 


com uma barra invertida... muito 
diferente das barras usadas 


\w para comter uma expressão 
Coincide com qualquer regular, 
caractere alfanumérico 
(letra ou número). $ o padrão deve ser os 
A string deve terminar ultimos caracteres 
com o padrão. na string. 


Embora estas descrições dos metacaracteres da expressão 
regular sejam precisas, eles são muito mais fáceis de entender 
quando examinados no contexto de um padrão real... 
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formulários e validação 


Os metacaracteres representam mais de um caractere literal 
VÁ 


/ 
/\w/ IN 
ah “A” ka Qualquer caractere único, 
Qualgven caractere 
atfanumérico único, Os metacaracteres são 


W m" 
ca NTA $ símbolos usados para 
LANO construir expressões 
regulares. 
Um di iba no inicio / N d/ 
de A string. Pa S 
Um único digito. 


Portanto, existem várias abordagens diferentes disponíveis nas | 
expressões regulares para coincidir com um único caractere. Mas e y 
as strings que contêm mais de um caractere? À seguir, estão mais /Nd/ 
algumas situações práticas de coincidência de padrões: 


/catS/ 


| bh) 2 ni te A Dois digitos na 
cat aparecendo 


| final de uma string. 
no final de vma _/ ) 
TER “007” “catch22” as) 


coincidência! 


Um digito na inicio s mês a e a 


string 


de uma string. em uma linha. L TAE 


or + apa, 
No /d/ ) cat aparecendo no 
/\d\d\d/ inicio de uma string, 
Escreva uma expressão regular que coincida com um código postal 
R completo dos Estados Unidos, com a forma # # # # #-# # # He 
xercício deva aparecer por si só. 
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solução do exercício 


Escreva uma expressão regular que coincida com um código postal 
completo dos Estados Unidos, com a forma # # # # #-# # # # e 
deva aparecer por si só. 


Exercicio E e 
eche a expressa 
A Eras eve A string deve terminar do apar 
iniciar com o padrão. com o padrão, E ie 
Inicie a De ve 
expressão EA cd AA ci bee 
regular con~ Coincide 
uma barra, exatamente 
O hifen não Fem nenhum com à si 
aca Z 
Coincide exatamente Significado especial aqui. é digitos em 
PONTE, digitos em apenas um hifen separando os uma linha, 
uma linha, £ 7 


numeros no codigo postal, 


Como entrar nas expressões regulares: quantificadores 


Qualquer texto que não seja um metacaractere é coincidido como está em uma expressão 
regular, significa que /howard/ coincide com o texto “howard” em qualquer parte de 
uma string. E mais, há algumas outras construções de expressão regular chamadas de 
quantificadores que aperfeiçoam mais os padrões. Os quantificadores são aplicados 
nos subpadrões que os precedem dentro de uma expressão regular e fornecem controle 


sobre quantas vezes um subpadrão aparece em um padrão. 


(n) ata O 
O subpadrão precedente 


* deve aparecer exatamente Combrola exatamente 


O subpadrão precedente deve 5 

aparecer 0 ou mais vezes. O svhpadrão € opcional e 
pode aparecer gualguer 
prambidade de vezes, 


E Ga 
O subpadrão precedente deve 
aparecer 1 ou mais vezes. 


O subpadrão é reguerido 
e pode aparecer gualguer 
puambidade de vezes, 


? < o subpadrão é opcional, mas 
O ipadião precedente podera aparecer apenas uma 
deve aparecer 0 ou 1 vez. VES, SE aparecer, 
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nyvezesemumalinha. — guamas vezes um 


subpadrão pode 
aparecer, 


Embora não sejam tecnicamente 
um gvantificadar, 05 parênteses 
são usados para io tantos 
svbpadrões grantas expressões 
matematicas você agrupar. 


(A 


Agrupe os caracteres 
e/ou metacaracteres 


em um subpadrão. 
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Quantificação do padrão 

Os quantificadores permitem que as expressões regulares sejam escritas de modo 
muito mais consistente do que com metacaracteres apenas. Ào invés de repetir 
explicitamente os subpadrões, um quantificador pode especificar exatamente 
quantas vezes um subpadrão pode aparecer. Como exemplo, o seguinte padrão 
coincide com um código postal usando quantificadores: 


Os guantificadores 
[0 Na ES -Na fas / controlam o número 


de vezes em que um 
Coma ajuda do puambiticador { } j não subpadrão ap akeceen 
É mais necessario listar cada digito, uma expressão regular. 


É possível ser muito criativo com os metacaracteres e os quantificadores para criar 
expressões regulares bem poderosas que coincidem com praticamente qualquer 
coisa que possa aparecer em uma string. 


/\w*/ E / (Hot)? ?Donuts/ 


Qualguer caractere deve a Coincide com Donuts 
Coincide com gualguer 


aparecer uma av mais H + Domo +s: 
i ou To 
quamidade de caracte res ETOS EREE 
alfanumenicos, inclusive ma 


Ding preenchida, 
com uma string vagial cad E 


+ + + 
QUAL É MINHA FINALIDADE? 


Coincida qualquer metacaractere ou quantificador da expressão 
regular com o que ele faz dentro de um padrão. 


E O padrão termina no final da string, 
\w O subpadrão é requerido e pode aparecer qualquer quantidade de vezes. 
$ Coincide com qualquer caractere alfanumérico (letra ou número). 

td Coincide com qualquer caractere, exceto uma nova linha. 

+ Coincide com qualquer dígito numérico. 

* O subpadrão é opcional e pode aparecer qualquer quantidade de vezes. 
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+ 
QUAL É MINHA FINALI 


+ C 


+ 


DADE? 


Coincida qualquer metacaractere ou quantificador da expressão 
regular com o que ele faz dentro de um padrão. 


\w 


Ad 


P: Uma expressão regular é 
uma string? 


R: Não. Você pode considerar uma 
expressão regular mais como uma 
descrição de uma string ou pelo 
menos, uma descrição de parte de uma 
string. As expressões regulares estão 
intimamente ligadas às strings e são 
usadas para coincidir os padrões de 
texto que aparecem nas strings, mas 
não são strings em si. 


P: As expressões regulares 
podem ser aplicadas em outros 
tipos de dados? 


R: Nāo, as expressões regulares são 
designadas dentro de uma string de 
texto, portanto se aplicam apenas às 
strings. Mas isso não as impede de 
ser extremamente úteis ao executar 
tarefas complexas de coincidência de 
texto que seriam muito dificeis usando 
strings apenas. 
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O padrão termina no final da string, 


O subpadrão é requerido e pode aparecer qualquer quantidade de vezes. 


Coincide com qualquer caractere alfanumérico (letra ou número). 


Coincide com qualquer caractere, exceto uma nova linha. 


Coincide com qualquer dígito numérico. 


O subpadrão é opcional e pode aparecer qualquer quantidade de vezes. 


Não existem 
Perguntas idiotas 


P: O que acontecerá se 
você quiser coincidir com 
um metacaractere como, por 
exemplo, um cifrão? 


R: Parecidos com as strings JavaScript, 
os caracteres com significado especial 
nas expressões regulares podem ter 
o escape aplicado com uma barra 
invertida. Portanto, para coincidir com 
um cifrão dentro de uma expressão 
regular, você especificaria o caractere 
$ como \$, Essa mesma regra aplica-se 
a qualquer outro caractere que tenha 
um significado especial dentro de uma 
expressão regular como, por exemplo, 
^, * e +, para citar alguns. Qualquer 
caractere que não tenha um significado 
especial pode ser colocado diretamente 
em uma expressão regular sem uma 
formatação especial. 


Pias expressões regulares têm 
alguma relação com a validação 
dos dados? Originalmente, não 
estávamos tentando validar um 
campo do formulário de data 
no Bannerocity? 


R: Ah, paciência, jovem Jedi. Logo, 
as expressões regulares, você usará. 
Sim, a razão para este pequeno desvio 
nas expressões regulares é elaborar 
um modo de validar os dados com um 
formato complexo, como uma data ou 
um endereço de e-mail. O Bannerocity 
ainda precisa de muita ajuda na frente de 
formatação dos dados, portanto haverá 
muitas oportunidades para aplicar as 
expressões regulares. Apenas continue 
tentando um pouco mais. 


Te Como as expressões 
regulares são usadas no 
JavaScript? 


R: Estamos chegando lá... mesmo! As 
expressões regulares são representadas 
no JavaScript por um objeto, que suporta 
vários métodos para usar as expressões 
regulares para coincidir com os padrões 
dentro das strings. 


formulários o validação 


Mestre dos padrões 


Entrevista desta se 


À expressão regular misteriosa, 
porém poderosa 


Use a Cabeça: Então, foi sobre você que ouvi falar 
da capacidade de pesquisar as strings e conhecer os 
padrões. É verdade? 

Expressão regular: Sim, sou um tipo de divisor de 
código, capaz de ver uma string de texto e separar os 
padrões imediatamente. A CIA realmente poderia usar 
uma pessoa como eu... mas eles não retornaram meus 
telefonemas. 


Use a Cabeça: Então, você tem um interesse em 
espionagem? 

Expressão regular: Não, apenas adoro procurar 
padrões no texto. Na verdade, sou um padrão, qualquer 
padrão, Apenas me dê alguns parâmetros sobre o que 
está procurando e eu encontrarei ou, pelo menos, 
deixarei que você saiba se existe ou não em uma string, 


Use a Cabeça: Parece ótimo, mas o método indexOf( 
) do objeto String já não pode lidar com a pesquisa da 
string? 

Expressão regular: Por favor, diga-me que você 

não foi até ele... aquele amador não sabe o básico 
sobre os padrões. Olhe, se precisar de um recurso de 
pesquisa muito simples que procura somente a palavra 
“defeituoso” em uma string, então indexOf() será sua 
resposta. Do contrário, perceberá rapidamente que 
indexOf() não faz nada sério ao analisar as strings. 


Use a Cabeça: Mas uma pesquisa de string não é uma 
forma de coincidência de padrão? 


Expressão regular: Sim e ir até a caixa de correio 

é uma forma de exercício, mas você não a vê nas 
Olimpíadas... ainda. O que quero dizer é que uma 
simples pesquisa de string é realmente a forma mais 
simplista de coincidência de padrões possível — o padrão 
é uma palavra ou frase estática. Agora, considere algo 
como uma data ou um URL do Web site. Esses são 
padrões verdadeiros porque, embora sigam formatos 
rígidos, as particularidades do que está sendo pesquisado 
não são estáticas. 


Use a Cabeça: Acho que entendo o que você quer 


dizer. Um padrão é uma descrição do texto que pode 
aparecer em uma string, mas não necessariamente o 
texto em si? 


Expressão regular: Exatamente. É como se eu pedisse 
a você para me avisar quando uma pessoa que é alta, 
tem cabelo curto e não usa óculos passa. Isso é uma 
descrição de uma pessoa, mas não uma pessoa real. Se 
um cara chamado Alan passar coincidindo com essa 
descrição, poderemos dizer que o padrão foi coincidido. 
Mas poderia haver muitas outras pessoas que também 
coincidem com essa descrição. Sem os padrões, não 
seríamos capazes de procurar uma pessoa com base 

em uma descrição — teríamos que procurar uma pessoa 
real. Portanto, a diferença entre pesquisar uma parte 
específica do texto usando indexOff) e coincidir com 
um padrão ao me usar é a diferença entre procurar Alan 
ou procurar uma pessoa que é alta, tem cabelo curto e 
não usa óculos. 

Use a Cabeça: Isso faz sentido agora. Mas como a 
coincidência de padrões aplica-se à validação dos dados? 


Expressão regular: Bem, validar os dados é 
basicamente assegurar que os dados encaixam-se em 
certo formato pré-concebido ou padrão. Portanto, meu 
trabalho é obter um padrão e ver se uma string de texto 
está de acordo com ele. Se estiver, então os dados serão 
considerados válidos. Do contrário, os dados serão ruins. 
Use a Cabeça: Portanto, há uma expressão regular 
diferente para coincidir com os diferentes tipos de 
dados? 

Expressão regular: Ah, sim. F é realmente onde 
grande parte do trabalho ocorre ao me usar para validar 
os dados — propor uma expressão regular que modela 
com sucesso um formato de dados. 

Use a Cabeça: Isso é muito importante. Fico grato 
por explicar o papel que desempenha na validação dos 
dados. 

Expressão regular: Tudo bem. Geralmente, tenho 
que explicar para mim mesmo... acho que é um padrão 
comportamental. 
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as expressões regulares conseguem a validação 


Como validar os dados com expressões regulares 


Por mais sensacional que possa parecer criar expressões regulares 
puramente para ver os padrões no texto, temos uma necessidade 
premente das expressões regulares para ajudar a validar o campo de data 
no Bannerocity e fazer com que Howard volte a voar. Uma expressão 


O método test() 
do objeto RegExp 
é usado para testar 


regular no JavaScript é representada pelo objeto RegExp, que inclui 
um método chamado test ( ) que é a chave para usar as expressões AmA: string para 
regulares para a validação dos dados. O método test ( ) verifica a obter um padrão 
existência de um padrão dentro de uma string. Š 
da expressão 
Éste objeto lrteral cria regular. 


A expressão regular 


automaticamente um objeto Rest. 
coincide com um pape bjefo Kestx, 
ios. 


digi 
postal comS dig O valor de um campo de 
RR 2 4 emrada, uma string, 
e transmitida para o 


is (ixegeiBest(dnputbicia value) 
anama o fm postal é inválido! 


Se o método deste 
) retornan false, o 
padrão falhou e ss 


dados são inválidos, 


método, 


A 
O valor de retorno de testO) sera 
+rue se o padrão coincidir com a 
ER 
string ou false, do combrario, 


, 
O método teste 
chamado no objeto da 
expres. são regular, 


Embora possamos fazer uma chamada para o método test ( ) dentro de 
cada função de validação diferente, há uma oportunidade para criar uma função 
de validação geral baseada em expressões regulares que funções mais específicas 
poderão chamar para fazer o trabalho genérico de validação. As seguintes etapas 
devem ser executadas pela função validateRegEx ( ) geral: 


Execute um teste na expressão regular que é transmitida como 
um argumento, usando a string de entrada que também é 
transmitida. 


Se o padrão coincidir, defina a mensagem de ajuda para o texto 

de ajuda que é transmitido como um argumento e então, retorne idateRegEx (reg, 

false. je estr, helpText, 
helpMessage) i 


Agora, tudo que está faltando é o código da função, que como resultado, não é 
tão ruim. Na verdade, grande parte desse código já apareceu nas outras funções 
de validação, portanto validateRegEx ( ) é tanto para a reutilização do 
código quanto para a criação de um validador geral de expressões regulares. 


Se o padrão não coincidir, limpe a mensagem de ajuda e retorne 
true. 
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A expressão regular, a string de embrada, 


o texto da mensagem de ajuda e o elemento A expres. são regular é testada 
da mensagem de ajuda são Lransmitidos como coma string de emrada, 
argumentos, 


function validateRegEx (regex, inputStr, helpText, helpMessage) ( 


// Veja se os dados inputstr são validados como sendo bons 


if (lregex.test(inputStr)) í 


// Os dados são inválidos, portanto defina a mensagem de ajuda e retorne 


!| false 


if (nelpText != null) Ea Sehri 
STe falh 
= helpMessage; 2º, 05 dados 


nelpText. innerHTML serão inválidos A dinh, 
or 
return false; Hert 4 E, 
Ee. da mensagem de ajuda 
) Sera exibido, 


else { 


4! Os dados são bons, portanto limpe a mensagem de ajuda e retorne true 


if (helpText null) 


nhelpText. innerHTML = “"; adia E Se as dados forem verificados 
return true; com sendo bons, a mensagem de 
1 


ajuda sera limpa 


onte seu Lápis 


Escreva o código para a função validateDate( ), que chama 
validateNonEmpty( ) evalidateRegEx( ) para validar o 

campo do formulário de data no Bannerocity. Sugestão: A função aceita dois 
argumentos, o campo de entrada da data e seu elemento do texto de ajuda afim. 
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solução inteligente 


Aponte seu Lápis 
~ Solução 


Escreva o código para a função validateDate ( 
), que chama validateNonEmpty( ) e 
validateRegEx( ) para validar o campo do 
4 Ê 
~ ' formulário de data no Bannerocity. Sugestão: A função 
naateNontmptyO € ç 
A onça va és aceita dois argumentos, o campo de entrada da data e seu 


imeiro para assegurar ) 
chamada primeiro para 45565 elemento do cexto de ajuda afim, 


que o campo não esta vazio. 


A expressão 

a es 
-dransmluta 
ara a função. 


valida teles xo, 


Como as barras fem um significado especial fy expressão regular da data usa 
~ ES 

nas expressões regulares, elas tem gue ter metacaracteres e quantificadores para 

o escape aplicado com uma barra invertida, aplicar o formato RAM, /D), / ABBA. 


Poderia ser uma boa idéia 
também permitir que as 
pessoas forneçam o ano com 
dois dígitos apenas. 


4 
A 

É gvestionavel se seus 

Scripts ainda serão 


Usados na ano 2 /, DO. 


O ano 2100 está muito distante... 


Saber que não mudaremos os séculos novamente por algum tempo, provavelmente 
estará tudo bem permitir que os usuários forneçam o ano como dois dígitos ao invés 
de quatro. Na realidade, é improvável que qualquer código JavaScript escrito hoje 
sobreviva 90 ou mais anos para que apresentem problemas. Howard considerou 
rapidamente uma abordagem cuidadosa para assegurar o Bannerocity no futuro 
ficando com os anos de quatro dígitos e, então, decidiu que pode conviver com um 
ajuste posterior, caso o código ainda esteja em uso na virada do próximo século. 
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Não existem 
Perguntas idiotas 


P: Por que é necessário chamar a função 
validateNonEmpty() em validateDate()? 
A expressão regular já não decompõe os dados 
vazios? 


R: Sim, a expressão regular valida inerentemente a data 
para assegurar que ela não está vazia e a validação de 
preenchimento poderia ser removida, e a data ainda sena 
validada muito bem. Porém. verificando primeiro para saber se 
os dados foram fornecidos, a página toma-se mais clara para o 
usuário, oferecendo mensagens de ajuda específicas com base 
em um determinado problema de validação. Se nenhum dado 
tiver sido fomecido, uma mensagem diferente será exibida e, 
então, caso uma data inválida tenha sido fornecida. O resultado 
final é um sistema de ajuda passivo que se comporta como 
um guia para o usuário no preenchimento do formulário. Esta 
melhona de utilização sutil parece ser uma troca valiosa para 
a pouca quantidade de código extra requerida. 


Como coincidir os mínimos e 
os máximos 


O quantificador () aceita um número que 
determina quantas vezes um subpadrão pode 
aparecer em uma string. Há outra versão desse 
quantificador que requer dois números, que 
especifica o número mínimo e máximo de 
vezes em que um subpadrão pode aparecer. 
Isso fornece uma maneira prática de ajustar a 
presença de um subpadrão. 


(min,max) <— 
O subpadrão anterior deve 
aparecer pelo menos min vezes 

em uma linha, porém não mais 


que max vezes. [ul 5, 8) $/ 
eagiponto seu Lápis 


Reescreva a expressão regular usada na função validateDate ( ) 
para que ela permita anos com 2 e 4 dígitos. 


caracteres alfanuméricos 


P: E se eu realmente quiser assegurar o código 
de meu script no futuro? Será um problema? 


R: Não, de forma alguma. Raramente é um problema 
tentar antecipar as futuras necessidades e escrever um 
código que possa adaptar-se a essas necessidades. No 
caso do Bannerocity, um campo de data com quatro dígitos 
é certamente mais seguro no futuro do que uma versão 
com dois. E lembre-se que se você realmente quisesse ser 
esperto, poderia permitir ao usuário fornecer apenas dois 
dígitos e, então, anexar o número do século a esses digitos 
internamente. Portanto, o efeito no formulário será de um ano 
com dois dígitos, mas a data será realmente armazenada como 
um ano com quatro dígitos. 


Nem todas as datas : 
estão no formato 


- MM/DD/AAAA. 


Preste atenção! Não é necessariamente seguro 
supor que todos os usuários 
sentem-se à vontade fornecendo datas como 
MM/DD/AAAA. Muitos lugares no 
mundo invertem os meses e os dias para que o 
formato seja DD/MM/ AAAA. 


Controle guambas vezes um 

subpadrãs pode aparecer como 
7 p 

uma faixa minima € maxima, 


Algumas senhas permitem entre cinco € orko 


7 
cos, a gue € perfeito 


para o gvantificador min/ max Í ja 


t 
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solução inteligente 


Aponte seu Lápis 
~ Solução 


Recscreva a expressão regular usada na função validateDate( ) 
Å versão min/max do para que ela permita anos com 2 e 4 dígitos. 


prenrtificador { } 
define o nimero minimo! NATZ} NAL2) \/\d12,4}$/ 


e maximo dos digitos da 
ano permitidos na data, 


m A expressão regular coincide com um 


padrão de texto em uma string e fica 
entre barras. 


Além do texto normal, as 
expressões regulares são compostas 
de metacaracteres e quantificadores, 
que fornecem um controle cuidadoso 
sobre como um padrão de texto é 
coincidido. 


Espere um segundo. Parece que o 
novo código de validação da data 
também permite anos com 3 dígitos? 
Isso não faz muito sentido... 


No JavaScript, as expressões rc; s 
são suportadas pelo objeto RegExp 
predefinido, mas ele é raramente 

visto porque as expressões regulares 
são geralmente criadas como literais. 


= Ométodotest ( ) no objeto 
RegExp é usado para testar 
um padrão da expressão regular em 
uma string de texto. 


A expressão regular da 

data coincide com os anos 
dr 

com 3 digitos como sendo 


~ s 
corretos.. não é homl Pine: 
Enter the date for the message to be shown: [03/01/200 j 


Nenhuma história revisionista pode acrescentar ao 
JavaScript suporte para os primeiros dez séculos. 


E como não foi suportado no passado, não há nenhuma razão para permitir que 

os usuários forneçam a parte do ano de uma data em centenas. Na verdade, não há 
nenhuma necessidade de permitir que os usuários peçam banners aéreos em nenhum 
ponto no passado, caso possamos possivelmente evitar. Portanto, eliminar os anos 
com 3 dígitos do código de validação é uma correção importante e ajudará a evitar que 
Howard enfrente um monte de novos problemas de entrada dos dados Bannerocity. 
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Como eliminar os anos com três dígitos com isto... ou aquilo 


Outro metacaractere muito útil na caixa de ferramentas da expressão regular é o metacaractere 
de alternação, que parece e funciona de modo muito parecido com o operador OR no 
JavaScript. Diferente do operador OR JavaScript, o metacaractere de alternação envolve 
apenas uma barra vertical, mas permite um padrão para especificar uma lista de subpadrões 
alternativos. Em outras palavras, o padrão terá uma coincidência bem-sucedida se qualquer um 
dos subpadrões alternativos coincidir. É muito parecido com o operador OR lógico porque 
basicamente está dizendo: “este ou este ou este..”. 


O metacaractere alternativo fornece 


um moda prático de especificar as 
estelaquele coincidências alternativas, 


O padrão coincidirá se o subpadrão 
este ou o subpadrão aquele coincidir. 


/Pequeno médio grande / 


Diversas possibilidades podem 
ser especificadas usando mais de 


um metacaractere alternativo, 


(remmelhalazul) pólula/ 


Uma escolha simples entre dvas 

coisas; este padrão coincide com 
$ 

pilula vermelha € pilula azul, 


eagporto seu Lápis 


Reescreva a expressão regular usada na função validateDate( ) 
mais uma vez e, dessa vez, certifique-se de que o ano possa apenas ter 2 
ou 4 dígitos, e nada mais. 
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seu número é real? 


Aponte seu Lápis 
~$ 


Solução recscrcva a expressão regular usada na função validateDate ( ) 


mais uma vez e agora, certifique-se de que o ano possa apenas ter 2 ou 
4 dígitos, e nada mais. 


O metacaractere de attermação 
CD) permite gue o padrão 
acerte anos com 2 e Y digitos. 


Não confie na sorte 


Howard realmente gosta do novo validador de data robusto que conta com 
expressões regulares para obter uma coincidência de padrões precisa. Na verdade, 
ele gosta tanto do validador que deseja avançar e usar as expressões regulares para 
validar os dois campos restantes no formulário Bannerocity: o número de telefone 
e o endereço de e-mail. 


Parece bom... pas eu 


- Personalized Online Shy Banners = 


re 
- 
ReBANNEROCITY) 


00 


Enter the banner message: [Mendango. ingressos para o filme macho! 
É 10012 
Enter ZIP code of the location: |1 " 
Enter the date for the message to be shown: [03/11/200 Pieaso enter a date (for exampie, 03/14/1975) 
r 
Enter your name: | 
Enter your phone number: | 


Enter your email address: [ — 


o campo do Formulario da data t agora 
é validado usando uma expressão 
regular, que é é muito precisa ao 
aplicar o formato da data, 


A idéia de Howard sobre validar o número de telefone e o 
endereço de e-mail no formulário de pedido Bannerocity é muito 
boa, mas significa que precisaremos inventar algumas expressões 
regulares novas para reinar nesses formatos de dados. 
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Você pode me ouvir agora? Validação do número de 
telefone 


De uma perspectiva da validação, os números de telefone não são terrivelmente 
difíceis de compreender, pois eles seguem um formato rígido. Naturalmente, 

sem as expressões regulares, eles ainda envolveriam uma boa quantidade de Como harii nas 
experimentação de strings, mas as expressões regulares tornam os números de 


lameja voar fora 
telefone fáceis de validar. Os números de telefone nos Estados Unidos seguem 275 


de sua area local, 


o seguinte padrão: do Cola e seguro aeb 
um formato 
Padrão = H # #-# ##-#### de número de 


Leletone nos 


A Éstados Unidos. 
Mudando os traços no padrão do número de telefone para barras e ajustando 


o número de dígitos, fica claro que o padrão do número de telefone é muito 


ecido com o padrão da data. 
par p O padrão da data Segue uma 


O dba cama UADD AADA 
ou UUD BA usando 


/^\d{2}\/\d{2}\/\d{2,4}$/ infor A am 


gramtiticador { |. 
O padrão do número de /^\d{3}-\d{3}-\d{4}$/ 
telefone é parecido com o 

padrão da data, exceto que ele 
usa hifens para separar um 
número diferente de digitos. 


A função validatePhone ( ) torna-se bem previsível graças à expressão 
regular do número de telefone e à função validateRegEx( ). 


function validatePhone (inputField, helpText) ( 
/1 Primeiro veja se o valor de entrada contém dados 
if (!validateNcnEmpty (inputField, helpText)) 


return false; 


// Então, veja se o valor de entrada é um número de telefone 


return validateRegEx (ANA ESA LI) =Va ANS, 


inputPield.value, helpText, 


“Please enter a phone number (for example, 123-456-7890)."); 
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era ponto com ou ponto org? 


Você recebeu uma correspondência: como validar o e-mail 


Com a tarefa de validação do número de telefone fechada, o desafio final de Howard é 

validar o campo do endereço de e-mail no formulário Bannerocity. Como qualquer outro 

dado, o segredo para validar um endereço de e-mail é dividir o formato em um padrão 

consistente que possa ser modelado usando uma expressão regular. 2 ,, 3 caracteres 
1 


alfanumericas, 


Padrão = NomeLocal@PrefixoDomínio.SufixoDomínio 


Seco ao 
Pitanumérico, 


Não parece muito ruim — um endereço de e-mail tem apenas três partes de texto 

alfanumérico com um símbolo (@) e um ponto incluído. 

Todos esses endereços de e-mail 
seguem o padrão do e-mail, Nosso 


+rabalho acaba agti, ov não? 


howardfbannerocity.com 


salesftduncansdonuts.com 


Puzzlerfyoucube. ca 


Criar uma expressão regular para coincidir com este padrão de e-mail é bem 
simples, considerando que tudo é muito previsível. 


O endereço de e-mail O porto deve ter o escape 
deve iniciar com um aplicado, uma vez gue € um 
ou mais caracteres a, e ema caractere especial nas 
alfanuméricos. /*Nw+Biw+. \w{2,3}$/ eresse regulares, 
ED [9] endereço de e-mail 
deve terminar com 
Zow3 caracteres 


alfanumericos, 


z 

Depois do simbolo @, 

um ou mais caracteres 
4 

alfanumericos aparecem. 


Embora este padrão faça o serviço, algo Poder do 
parece faltar. Todos os endereços de e-mail cérebro 


visível? 
realmente seguem tal formato previsível? Quais outras variações do padrão de e-mail 
são possíveis? Considere todos os endereços 
de e-mail diferentes que você já viu. 
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Os endereços de e-mail são realmente mais complexos do que parecem ser 
à primeira vista. Existem algumas variações no formato básico do e-mail 
que devem ser consideradas ao formular um padrão de e-mail confiável 
para a validação dos dados. Eis alguns exemplos de endereços de e-mail 
perfeitamente válidos: 


cube loverstyoucube.cà 
aviator. howardêbannerocity com 
Sublinhado no nome local, 
Ponto no nome local. 


rockyfi-rock mobi Je love-donutsfêduncansdonuts. com 


7 
Hiten no prefixo do Quatro caracteres 
nome do dominio. no sufixo do dominio, 


à 5 
Hisens no nome local. 


Opa, precisamos realmente 
de um modo de coincidir os 
caracteres opcionais para 
validar os endereços de e-mail. 


“Sth+jasongmandango == 


Sinal de mais no nome local, 


is 


: 
Sufixos extras do dominio, que 
são realmente apenas riles 

7 
extras no nome do dominio, 


Os endereços de e-mail apresentam a necessidade de 
coincidir os caracteres opcionais em um padrão. 


Como resultado, existem vários caracteres opcionais diferentes que 
podem estar espalhados nas partes de um endereço de e-mail que 
lidamos anteriormente como puramente alfanuméricos. Precisamos de 
uma maneira de incorporar tais caracteres opcionais em um padrão... 
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uma distribuição de caracteres 


Como coincidir caracteres opcionais a partir de um conjunto 


Outro recurso regular muito útil que afeta diretamente o padrão do endereço de e-mail é 

o de classes de caracteres, que permite criar subpadrões muito controlados dentro de 
um padrão. Mais especificamente, as classes de caracteres primam pelo estabelecimento de 
regras onde os caracteres opcionais favorecem muito um subpadrão. Você pode considerar 
uma classe de caractere como um conjunto de regras para coincidir com um único 
caractere. 


[ClasseCaracterel fs classes do caractere estão 


re embre colchetes. 
ClasseCaractere é um conjunto de regras AES 


de expressão regular para coincidir com 
um único caractere. 


Ás classes do caractere 


Dentro de uma classe do caractere, todo caractere listado 


é considerado legal para a coincidência de caracteres, oferecem um modo 
como um tipo de alternação entre os metacaracteres que 
permite construir uma lista de subpadrões alternativos. eficiente de controlar 


Porém, o resultado de uma classe de caractere é sempre 
uma coincidência para um único caractere, a menosquea OS caracteres opcionais 
classe de caractere seja seguida de um quantificador. Alguns 


exemplos ajudarão a colocar as classes do caractere em em um padrão de 
“perspectiva”. E 
expressão regular. 


“di g m 
/d [ul g / Ambas as strings são coincidências de padrão. 
“du g V/A 


“$3 50” 


w mr 
$5 “$19.95” Não se esqueça de aplicaro 
escape nos caracteres especiais : 
Todas estas strings financeiras nas expressões regulares. : 
coincidem com o padrao, 


Preste atenção! Os caracteres que vêm um significado 
i especial nas expressões regulares devem 


ter o escape aplicado para incluir o caractere real em 
uma expressão regular. Aplique o escape em um 
dos seguintes caracteres precedendo-o com uma barra 
invertida N): N$ +0. 


As classes de caracteres são exatamente o 
que precisamos para colocar em forma o 
padrão do endereço de e-mail e adicionar a 
validação do e-mail ao Bannerocity... 
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Como construir um validador de e-mails 


Agora, é possível criar um padrão muito mais robusto para os endereços de e-mail 

decompondo todos os possíveis caracteres opcionais que podem aparecer no nome 

local e no nome do domínio. 
ésta parte do endereço de e-mail 
pode aparecer uma ou mais vezes. 


E 


Padrão = NomeLocal&PrefixoDomínio. SufixoDomínio 


z 
Qualquer alfanumerico, a 
Qualquer 
E 4 


de AE alfanumerico, O porto é = Jow J 
assim como ~, considerado caracteres 
parte do sufixo alfanumericos, 
do dominio, precedidos de um 
ponto, 


Lembre-se de que há muitos modos diferentes de abordar a criação de padrões, 

inclusive o padrão do endereço de e-mail. Pode ser surpreendentemente difícil criar 

um padrão que enderece com sucesso cada pequena nuança de um determinado e 
formato de dados. Já experimentamos uma vez como a construção geral do padrão 

é elaborada, traduzi-la em uma expressão regular real é bem simples. 


Aponte seu Lápis 
“q P 


` 
Termine o código que falta para a função validateEmail( ), 


que é usada para validar um endereço de e-mail no Bannerocity. 


function validateBnail (inputField, helpText) ( 
// Primeiro veja se o valor de entrada contém dados 
E (ececuneceece cce enero rara raiar renaca cn sn era t tarada (inputField, helpText)) 


return false; 


// Então veja se o valor de entrada é um endereço de e-mail 
return validateRagERl...csacanenenaesame nes veses nad r ar inreremanne nantes a gas AMRS ERMAS 46 USA 
inputrield.value, helpText, 
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solução inteligente 


aponte seu Lápis 


Solução 


Termine o código que falta para a função validateEmail( ), 
que é usada para validar um endereço de e-mail no Bannerocity. 
expressão regular de e-mail usa a 


function validateEmail (inputField, helpText) ( maioria dos frugues da expressão regular 


gue aprendemos para validar um endereço 


4! Primeiro veja se o valor de entrada contém dados 


i ñl, 
validateNonEmpt: de e-mail, 
dn sato Pedal ADELA E PRP OI (inputField, helprext)) / 


e ~ 
return false; ` A tungão validateNanimptyt ) ainda é chamada 
inicialmente para verifican a Falta de dados, 


Ż/ Então veja se o valor de entrada é um endereço de e-mail a 


1º — + +e [\w-]+(\.\w{2,4})+$/ 


mm 
AE TS (A RU o a A ' 


A 
\ inputField.value, helpText, 
\ “Please enter an email address (for example \ johndoefacme. com) 


O nome local pode ser Se a validação do e-mail O sufixo do nome do 
alfanumerico, assim como falhar, uma mensagem de dominio pode ter de 

vp hE deve es Far no ajuda sera exibida para Za caracteres 
imcio da string. esclarecer o formato de alfanuméricas no final ) 


embrada com um exemplo, da string, 


Um formulário Bannerocity a toda prova 


A coleção de dados do pedido de banner aéreo no Bannerocity agora é pura 
perfeição graças a alguns esforços intensos de validação. Howard está tão 
entusiasmado que decidiu voar com um anúncio de banner próprio. 


Howard está vibrando por voltar 
a fazer o que adora... voa I 


a 


Enter the banner message: [Mandango..ir 
Enter ZIP code of the location: | 10012 
Enter the date for the message to be shown: [03/11/2009 


Os campos do número de Felefone e da 


endereço de e-mail agora são validados 
segundo formatos de dado muito rígidos, 


Enter your name: [Shaaman $ 

Enter your phone number: [(212 555-5339 Please enter a phone number (for example, 123-456-7890). J 

Enter your email address: | setht@mandango Please enter an email address (for example, johndoe@acme.com). 
Order Banner | 


formulários e validação 


Cruzadas do JavaScript 


Eis um padrão que você pode reconhecer. 


uma palavra cruzada! 


Nenhuma validação é requerida — apenas algumas respostas. 


Horizontal 


1. O objeto JavaScript que suporta as expressões 
regulares. 

2. Inicializado quando os dados em um campo 
do formulário mudam. 

4. Uma maneira prática de especificar caracteres 
opcionais em uma expressão regular. 

7. Este objeto contém todos os campos 
individuais em um formulário. 

9. Um caractere especial em uma expressão 
regular. 

10. Uma descrição de um formato de dados. 

12. Este tipo de validação verifica para assegurar 
que um campo do formulário tem dados. 

13. Controla quantas vezes um subpadrão 
aparece em uma expressão regular. 


| 


ask 
| 


L 
J 


Vertical 


1. Usada para coincidir os padrões do texto. 

3. Faça isto nos dados do formulário para 
assegurar que sejam legítimos. 

5. O método usado para coincidir uma string 
com uma expressão regular, 

6. Inicializado quando o usuário deixa um campo 
do formulário. 

8. O atributo HTML que identifica com 
exclusividade um campo em um formulário. 

11. Útil em muitos casos, mas geralmente não é 
a melhor maneira de notificar o usuário sobre os 
dados inválidos. 
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solução da Cruzadas do JavaScript 


CARACTERE] 


T 
A 
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formulários e validação 


porre a piena O que o JavaScript traz para ADN 


os dois cérebors e os formulários Web? Á NAS 


resolver a charada. 
B <———— tum encomtro de mentes! < fé 2 


“Mandango... © localizador de assentos “... assentos de cinema para machos!” 


de cinema para caras fortes!” 


105012 100012 
03/11/200 11 de março de 2009 
212-555-5339 4 (212) 555-5339 


setht@mandango sethitêmandango.us 


Esses dados 
parecem terríveis! 


Parece bom! É 
como surfar... 


cd 


/*val (ley jue|krie)/ /name | id$/ 


O JavaScript tem muito a oferecer 
para os formulários Web, portanto é 

difícil criar um argumento válido 
para qualquer coisa. À resposta 

quase certamente envolve dados 
em algum nível, mas como, 
especificamente? 
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8 como disputar a página * 
* Como repartir o HTML 
com o DOM 


Com os ingredientes certos e 
algumas mexidas, posso preparar 
praticamente qualquer coisa. Só 
tenho que ver com atenção o que 

estou fazendo... você sabe, a torta. 


Ter controle do conteúdo da página Web é muito parecido com o ato 


de cozinhar. Bem, sem bagunça... e, infelizmente, também sem a recompensa comestível depois. Porém, 
você tem acesso total aos ingredientes HTML que entram em uma página Web e o mais importante, tem 
a capacidade de alterar a receita da página. Portanto, o JavaScript torna possível manipular o código 
HTML em uma página Web segundo a sua vontade, o que abre todos os tipos de oportunidades interessantes 
possibilitados por uma coleção de objetos padrão chamada de DOM (Document Object Model). 


aspirações da interface 


Funcional, mas desajeitada... problemas da interface os sientes 


O script da aventura do Boneco de Palito no Capítulo 4 é um bom exemplo de podem ficar 
tomada de decisão interativa com o JavaScript, mas a interface do usuário é um chatos e 
pouco difícil, especialmente segundo os padrões Web modernos. As caixas de imberrompem 
alerta tendem a ser chatas de navegar e os botões de opção obscuros não são muito o fluxo do 
claros, vendo como eles são simplesmente identificados como 1 e 2. aplicativo, 


Ped 


/ 


Your journey begins at a fork in the road. 


Es 


A Aventura do Boneco de Palito 
funciona bem... mas poderia 
funcionar muito melhor. 


As opções de decisão são muito 
obscuras, fornecendo porco 
combexto para tomar decisões, 


Ellie percebe que é hora de corrigir os erros na 
interface do usuário na Aventura do Boneco de Palito... 
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Como descrever as cenas sem caixas de alerta 


O problema com a abordagem da caixa de alerta para exibir as descrições da cena é que o 
texto desaparece assim que o usuário clica em OK. Poderia ser melhor se a descrição fosse 
exibida diretamente na página para evitar os alertas chatos e trazer a história para o corpo 
da página Web. É assim que Ellie deseja que a Aventura do Boneco de Palito fique: 


e [9] conjunto de arquivos mais recente para a 


Aventura do Boneco de Palito esta promo para você 
a P 
em www altabooks com br, 


O SEER Stick Figure Adventure 


A área de descrição 


ProM 
arece Um alerta não e mais 
da cena, agora, ep 


THE BRIGE 


H 
io porque o 
5 rm necessaria porque. 
na pagina gt m texto de descrição 
substitu o ai da cena e mastrado 
caixas de alerta t diretamente na 
” página. | 
| 
co aa |: . PR 


Your joumey begins at a fork in the road 


Please choose: 1] 3] 


one nem 


jm e á id A 
Sia botões ainda são 

Dn a ada veg: 

uma correção dec 


q 


Poder do 
cérebro 


Qual você acha que seria a melhor maneira do JavaScript 


suportar a nova funcionalidade de descrição da cena? 
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onde você quer que eu coloque isto? 


. e P 
Como criar espaço na página com div 
Para exibir a descrição da cena na página, primeiro precisamos definir uma área 
física na página como um elemento HTML antes de usarmos com seriedade o 
código JavaScript. Como o texto de descrição da cena aparece como seu próprio 
parágrafo, uma tag <div> funcionará bem para manter o texto da cena. 


>div> Fem um I) gE identifica com 
mto para manter o 


Atas 


A vidade o eme 
Lexto de descrição da cena. 


<body> 


<div = 
Style=“margin-top:100px; text-align:center*> 


<img id="sceneim 
9” src="sceneo .pna” 
-Png” alt="Stick Fi 
gure Adventure” /><b; 
><br /> 


<div id="scenetext”></div>ebr /> 


Please choose: 


<inp 
p ” id="deci - my” 
sionl” value=”] onclick=”; ChangeScene (1) ” > 


Cision2” ="2" 
nar valus="2" onclick="changesScene (2) 1a, 


Vejo que a tag <div> tem seu atributo 
id definido. Podemos usar esse ID 
para acessar a descrição da cena? 


Um ID é precisamente como os elementos são acessados na 


página, inclusive a descrição da cena <div>. 
É verdade, o atributo id da tag <div> pode ser usado como a base para acessar O 
elemento na página a partir do código JavaScript. Na verdade, já fizemos isso... 


Os IDs dos elementos em 
a devem ser 


te 
sempre exclusivos. 


Preste atenção! Não se esqueça que todo o 
: objetivo do atributo id é 
identificar com exclusividade os elementos em : 
uma página. Por isso, eles devem sempre ser; 

únicos dentro de uma determinada página. 
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Como acessar os elementos HTML 


O método getElementById( ) do objeto document padrão que 

usamos muito. Ele permite alcançar uma página e acessar um elemento Loba deve coincidir 

HTML... contanto que esse elemento tenha um ID exclusivo. com a atributo id do 
elememts HTIUL 


neste y 
var scenepesc = document GEEBIENEREBPIA “scenetext”) ; caia 


<img id=” 


4 
O elemento div € acessado 
usando sev atributo id, 


Sceneimg” sr. 


“scene0.png” ... 
<div iderscenetextr>e/div>ebr /> 


Please choose; 


Com o elemento de descrição da cena em mãos, estamos mais perto de manipular o 
conteúdo armazenado nele. Mas há um outro método que vale a pena investigar primeiro. 
É o método getElementsByTagName ( ), que obtém todos os elementos em uma 
página de certo tipo, como div ou img. Esse método retorna um array contendo todos 
os elementos na página, na ordem na qual eles aparecem no HTML. 


O nome da propria tas, sem<>, 


Escreva o código JavaScript para ter acesso à imagem laranja no seguinte 
código do corpo HTML, primeiro usando getElementById( ) e 


Exercício então, usando getElementsByTagName ( ). 


<body> 
</p> 
<p>Before starting, please choose an adventure stress level:</p 


"mgreen.png” alt="Relaxing” /><br /> 


<img id="green” src= 
” /><br /> 


m m Atstitatin 
<img id="blue” src="blue.png” alt="Irritating 


ia ” alt="Prazzled” /><br /> 
<img id="yellow” src="yellow.pna” alt="Frazzle 


cá » alt="Panicked” /><br /> 
<img id="orange” src="orange.png” alt="Pan 


m "y 
<img id="red” src="red.png” alt="Maddening” /> 


</body> 


Usando getElementsByTagName ( ) 
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solução do exercício 


Escreva o código JavaScript para ter acesso à imagem laranja no seguinte 
código do corpo HTML, primeiro usando getElementById( ) e 
Exercício então, usando gerElement sByTagName ( ). 
Solução 


<body> eee 
z el:</ 
<p>Before starting, please choose an adventure stress lev p: 


rgreen.png” alt="Relaxing” /><br /> 


A imagem 


<img id="green” src= 


<img id="blue” src="blue.png” alt="Irritating” /><br /> 
EE E 7 $ 
<img id="yellow” src="yellow.pna” alt= Frazzled” /><br 


G alt=” ><br /> 
img 1d="orange” src="orange.png” alt Panicked 


Ting ido” rea” src="red.png” alt="Maddening 7> 


</body> 


Usando getElementById( ): 


Usando getElementsByTagName ( ) 


Como entrar em contato com seu HTML interno 


Tudo bem, o motivo real de todo esse negócio de acesso do elemento 


À propriedade 


HTML é para obter o conteúdo armazenado em um elemento. inner HTML 
Você pode acessar os elementos HTML que são capazes de manter 
o conteúdo do texto, como, por exemplo, div e p, usando uma fornece acesso 


propriedade chamada inner HTML. 


a todo conteúdo 
Você está sozinho armazenado em 


na floresta. E iarstoryr> UM elemento. 


O conteúdo HTML iii 


formatado também 
f 
jin inner HTIAL obtém 
E Es TuL Hodo o conteúdo de 

é PL ia um elemento, inclusive 
document gotRlementEyT ("story") toner peste o 
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Parece que você deve ser capaz 
de definir o conteúdo de um 
elemento HTML tão facilmente 
quanto pode obtê-lo. É possível? 


innerHTML também pode ser usada para 
definir o conteúdo na página. 


A propriedade innerHTML é realmente usada para definir o 
conteúdo HTML tanto quanto para obtê-lo. O conteúdo de 
um elemento pode ser definido para uma string de texto HTML 
atribuindo a string de texto à propriedade inner HTML do 
elemento. O novo conteúdo substituirá qualquer conteúdo que 
tenha pertencido anteriormente ao elemento. 


document . getElementById (“story”). innerHTML = 


O comeúdo do elemento é definido ou, 
neste casa p substituido eira 7 
à propriedade inner a 


a é 4 1 1 
uma string Você não está sozinho! 


Aponte seu Lápis 


Supondo que a mensagem de descrição da cena já está sendo 
definida corretamente com base nas decisões tomadas pelo 
usuário, escreva a linha de código que define o texto da 
mensagem para o elemento de descrição da cena na página 
Aventura do Boneco de Palito usando inner HTML. 
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solução inteligente 
Supondo que a mensagem de descrição da cena já está sendo 
definida corretamente com base nas decisões tomadas pelo 
usuário, escreva a linha de código que define o texto da 


Aponte seu Lápis 
Ni Solução 
mensagem para o elemento de descrição da cena na página 


O TD da mens g ea Aventura do Boneco de-Balito uaindo innestiTML. 


Uma aventura com menos interrupções 


A área de descrição da cena que muda dinamicamente fornece à Aventura do Boneco 
de Palito uma experiência do usuário mais suave e divertida sem alertas desagradáveis. 


Oba, é uma mudança 
sutil, mas eu adoro. 


A descrição da cena 


ane 
INTO SRA Agora se adapta ao 


fluxo da página, 


peaceful scam. 


fo are standing on the bridge overlooking à 
Please choose: 1] 2] 


Com exceção de adicionar <div> para a área de descrição da cena 
(mensagem) e do código para definir a propriedade inner HTML, as únicas 
outras alterações para o código da Aventura do Boneco de Palito envolvem 

adicionar uma variável message e então, defini-la em cada cena diferente... 
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Um foco no código da 
Aventura do Boneco de Palito 


<html> 
<head> 
<title>Stick Figure Adventure</title> 


<script type="text /javascript”> 
/i Inicialize a cena atual na Cena 0 (Intro) 
var curScene = 0; 


ra 
function changeScene (decision) { À variavel local da mensagem 
// Limpe a mensagem da cena e criada para armazenar a 
Essa << ~ 
mensagem de descriçao da 


switch (curScene) ( cena para a nova cena, 


, 
case 0: A variavel 
pS k a message é definida 
ra o exto de 
break; pa H 
moa descrição Unico à 
if (decision == 1) { 
curScene cada cena, 
} 
else { 
curScene 


/i Atualize a imagem da cena 


document . getElementById (“sceneimg”).src = “scene” + curScene + “.png”; 


// Atualize o texto de descrição da cena 


abciment-GetElementById("scenetexe”) i inierntmi = message; O fexto de descrição 
o: da cena € definido para 
</script> 


</head> o combeúdo da variável 
<body> da mensagem usando a 


<div style="margin-top:100px; text-align:center”> propriedade inner HTL, 


<img id="sceneimg” src="scene0.png” alt="Stick Figure Adventure” /><br /> 
<div id="scenetext"></div><br /> 
Please choose: 


<input type="button” id="decision1” value="1" onclick="changeScene (1)” /> 
<input type="button” id="decision2” value="2" cnclick="changeScene(2)” /> 
</div> 
</body> 


</html> 
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pergunte 


P:possousargersienenteyia o 
para acessar qualquer elemento 
em uma página? 


R: Sim, mas apenas se o elemento tiver 
seu atributo id definido para um valor 
exclusivo. O atributo id é absolutamente 
essencial para usar o método 
getElementById( ). 


Não existem 
Perguntas idiotas 


P: innerHTML pode ser usada 
para definir o conteúdo de 
qualquer elemento HTML? 


R: Não. Para definir o conteúdo 
“HTML interno” de um elemento, o 
elemento deve ser capaz de conter o 
conteúdo HTML. Portanto, na realidade, 
innerHTML é para definir o conteúdo 
de elementos como div, span,p èe 
os outros elementos que agem como 
contêineres de conteúdo. 
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Não tão rápido. Ouvi dizer que 
innerHTML não é nem mesmo 
um padrão Web. É verdade? 


P: Quando você define o 
conteúdo de um elemento com 
innerHTML, O que acontece 
com o conteúdo? 


R: A propriedade innerHTML 
sempre sobrescreve completamente 
qualquer conteúdo anterior quando o 
define. Portanto, não há nenhum conceito 
para anexar o conteúdo a inner HTML, 
embora você possa obter o efeito de 
anexação do conteúdo concatenando 
o novo conteúdo ao antigo e, então, 
atribuindo o resultado a innerHTML, 
como: elem. innerHTML += * 
Esta sentença é anexada. 


Bem, sim, mas os padrões Web realmente são 


uma preocupação? 
É verdade, a innerHTML foi criada originalmente pela Microsoft 
como um recurso patenteado para o navegador Internet Explorer. 
Desde então, outros navegadores têm adotado a inner HTML e ela 
tornou-se um padrão não oficial para mudar rápido e facilmente o 
conteúdo dos elementos da página Web. 


Mas o fato é que a inner HTML não é um padrão. Pode não 

parecer grande coisa, mas a idéia por detrás dos padrões é fazer 

com que as páginas Web e os aplicativos funcionem o máximo 
possível com muitos navegadores e plataformas. Além disso, há um 
modo compatível com os padrões de realizar a mesma tarefa que é 
basicamente mais flexível e poderoso, mesmo que não seja tão simples. 
Essa abordagem envolve o DOM, ou Document Object Model, uma 
coleção de objetos que fornece ao JavaScript um controle completo e 
total sobre a estrutura e o conteúdo das páginas Web. 


como disputar a página 


Como ver a floresta e as árvores: Document Object Model (DOM) 


O DOM oferece uma visão amistosa do script na estrutura e no conteúdo de uma página Web, que 
será importante se você quiser usar o JavaScript para alterar dinamicamente uma página. Através da 
lente do DOM, uma página parece uma hierarquia de elementos na forma de uma árvore. Cada folha 
na árvore é um nó, que se relaciona diretamente a cada elemento em uma página. Quando um nó 
aparece sob outro nó na árvore, ele é considerado um filho desse nó. 


<html> DUN 4 
r, Sim, € uma arvore 
<head></heaí 4 
estranha, mas as 
1 
<body> 


1 
nos de uma Pagina 

lembram uma arvore, 
<p id=”story"> 


i ta. 
você está <strong>sozinho</strong> na floresta 


<ip> 
</body> 


<ihtml> 


la Fopo de cada arvore DOM 
j ? 

fica o no Documento, que esta 

acima do elemento firuL, 


istes são 


4 
Fados os nos. 


O DOM “vè” 
uma página Web 
como uma árvore 
hiexárquica de nós. 


DOM 


O espaço em branco 


em vola da tag dE 
<p> na pagina € se 
interpretado como 

um texto vazio, 


“Você está” J 
O texto torte 
sozinho aparece 

d 
sob um no da 


Fag <strong>. 


strong J “na floresta”. 


“sozinho” 
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como classificar os nós da árvore 


Sua página é uma coleção de nós DOM 


Cada nó em uma árvore DOM é classificado segundo seu tipo. Os principais tipos de nó correspondem 
às partes estruturais de uma página, basicamente consistindo nos nós do elemento e os nós do texto. 


da Os nós DOM são 
ualquer elemento HTML 
DOCUMENTO que corresponde a uma tag classificados segundo 


h árvore HIML 
O nó superior em uma árvore +" no código HTM 
que representa o documento em % © à E seus tipos de nó. 


aparece logo acima do elemento html. 
p ATRIBUTO 


O conteúdo do texto para um Um atributo de um elemento, acessível 
elemento, sempre armazenado como através de um nó do elemento, mas não 
um nó-filho sob um elemento. presente diretamente na árvore DOM 


Aplicar tipos de nó na árvore DOM para uma página Web ajuda a esclarecer 
exatamente como cada parte de uma página é percebida pelo DOM. O interesse 
particular é como os nós TEXTO sempre aparecem imediatamente sob um nó 
ELEMENTO como parte (ou todo) do conteúdo do nó. 


<html> 


ea pa tati ed cent 
tipo se no, eles não aparecem na arvore Dociimento, 
<body> $ de nas de vma página, 
oE Ba 
html 


Ve 
ocê está <etrong>sozinho</strong> na floresta 


</p> 


</body> 


</html> 


Embora este elemento head 
esteja vazio, ha geralmente 


“sozinho” nôs-filhos soh o no head na 
hs Fa 
Con) maioria das paginas, 
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Aponte seu Lápis 


ã á DOM do c 

lete a representação da árvore å 
asp Aa do Boneco de Palito AP o 
nome de cada nó. Também anote o tipo de cada nó. 


</head> 


<body> 


<div style-“margin-top:100px; text-aligı 


enter”> 


“ing id="sceneimg” src="scene0.png” alt “Stick Figure Adventure” /><br /> 


<div ide"scenetext”></div>ebr /> 


Please choose: 


<input type="button” id="decision]* value="1" 


enclick-"changescene (1)” /> 


<input type="button” ide"decision2r value="2 


onclick="changescene (2)” /> 
</div> 


</body> 


</html> 
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solução inteligento 


arnie pp o Complete a representação da árvore DOM do código 
olução 


HTML da Aventura do Boneco de Palito escrevendo o 
nome de cada nó. Também anote o tipo de cada nó. 


<html> 


<head> 


</head> 


<body> 


<div style= 


“margin-top: 100px; text-align:center”> 


<img id="sceneimg” Src="scene0.png” alte: 


“Stick Figure Adventure” [><br /> 


<div ide"scenetext”>c/div>cbr 1» 


Please choose: 


Sinput type="button” ig-"decisioni” 


Yalue="1" onclick="changescene n” > 


<input type="button” 


id="decisionz” value="2" 


onclick="changeScene (2)” /> 


</html> 


Documento 
: PR, —s 
is 
O espaço em branco antes e depoi sa 
de um elemento conta como um 
elemento de texto vazio. 


ELEMENTO 


“Please a 


Tixo 


ExTO TEXTO 


sto po 
) TixTO 


ELEMENTO ELEMENTO 


4a 


ELEMENTO ELEMENTO 
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como disputar a página 


Como subir na árvore DOM com propriedades 


A maioria das interações com o DOM começa com o objeto document, 
que é o nó mais superior na árvore de nós de um documento. O 

objeto do documento oferece métodos úteis como, por exemplo, 
getElementById( ) egetElementsByTagName ( ), e algumas As propriedades 
propriedades também. Muitas propriedades do objeto document estão P desk 
disponíveis a partir de cada nó em uma árvore. Alguns desses objetos ainda do nô são úteis 
permitem a você navegar para outros nós. Isso significa que as propriedades 


do nó podem ser usadas para percorrer a árvore de nós. para percorrer 
2 A 
os nós na árvore 
nodeValue nodeType DOM 
O valor armazenado em um nó, O tipo de um nó como, por P 
apenas para os nós de texto e exemplo, DOCUMENT ou 
de atributo (não de elementos). TEXT, mas expressado como 
childNodes iii firstChild 
Os arrays que contêm todos a imei ó-fi! Ó. 
oiis A col odo lastChild O primeiro nó-filho sob um nó. 
os nós-filhos sob um nó, na Dolti flh b 5 
ordem na qual os nós aparecem ae DA 
no código HTML. 
Å propriedade 
Estas propriedades são a chave para ser capaz de manipular a árvore nadeValve sempre 
de documentos para acessar dados específicos do nó. Por exemplo, contém E M A 
você pode usar as propriedades do nó com o método de acesso do nó; com oma formata 
getElementById( ) para isolar rapidamente um nó específico. 4 pbds aiii 
DA adicional, 
alert (document .getElementById (*scenetext”) HEdENENHE) ; O texto de descrição 
A jj Va da cena na Aventura do 
propr “peer AT Boneco de Palito começa 
aecrse conr Evia $ inicialmente vazio, 


armazenado no no, 


Tudo bem, então talvez não seja o melhor exemplo, vendo v 

como o texto de descrição da cena div inicia vazio na 
Aventura do Boneco de Palito. Mas, finalmente, deve ser 

definido para algum texto muito atraente quando a história 

avançar, neste caso o código pareceria muito mais inteligente. 


O seguinte código irá se referir a um nó na árvore na página 356. 
Exercício Estude com cuidado o código e, então, circule o nó a que ele se refere. 


document . getElementsByTagName (“body”) [0] -childNodes [1] .lastChild 
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solução do exercício 


O seguinte código irá se referir a um nó na árvore na página 356. 
Estude com cuidado o código e, então, circule o nó a que ele se refere. 


Exercício 
Solução 


a 


document .getElementsByTagName (“body”) [0] .childNodes [1]. lastChild 


rem 


body € o elementa diy, 


Ai 
Hi apenas vma tas enna portante TURN 
| ela Fem gue ser referida coma o 


o 4 
Segundo no-filho da elemento 


primeiro elemento no array retornado o 
or setilement yTy Name > á GÊ 
by principal € 
um elemembo de 
feto vazio, 


Head” J 


1 


O método gettlemertb, LO 
7 y 4 

obtem um unico elemento gee 

definido para um LD especifico, 


O método 

settlememts byg Namet ) 
obtêm Fados às elementos 
com certo nome da Fag na 


Não existem página imbeira, coma Cinputo, 
por exemplo, 
Perguntas idiotas 


P.: Quat éa diferença entre getElementById() 
egetElementsByTagName ( ) na árvore DOM? 
Por que eu deveria escolher um ao invés do 
outro? 


R: Os dois métodos oferecem abordagens diferentes que 
basicamente têm relação quer ou não seu objetivo seja 
isolar um único elemento ou um grupo de elementos 
parecidos. Para isolar um único elemento, você não pode 
tocarem getElementById( ) -apenas mostre um ID 
no elemento e estará pronto para continuar. 

Mas se quiser visar um grupo de nós, 
getElementByTagName( ) será uma opção muito 
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melhor. Por exemplo, se você quisesse ocultar todas as 
imagens em uma página usando o JavaScript, primeiro 
chamaria getElementsByTagName ( ) etransmitiria 
“img” para obter todos os nós da imagem na página. Então, 
mudaria a propriedade do estilo CSS visibility emcada 
um dos elementos da imagem para ocultá-los. Opa, estamos 
nos adiantando... voltaremos ao DOM e à CSS posteriormente 
neste capítulo. Agora, apenas compreenda que embora o 


getElementsByTagName ( ) não seja tão popular 
quanto O getElementByTd( ), ainda tem seu lugar 
em situações especiais. 


como disputar a página 


Então, as propriedades do nó tornam 
possível entrar no código HTML e 
acessar o conteúdo da página Web... 

mas elas podem ser usadas para 
mudar esse conteúdo? 


As propriedades DOM permitem mudar o conteúdo 
da página Web e manter os padrões Web de acordo. 


Como o DOM exibe tuda em um documento da página Web como 
um nó, mudar uma página envolve mudar seus nós. No caso do 
conteúdo de texto, o texto para um elemento como, por exemplo, div, 
span ou p sempre aparece como um nó ou nós-filhos, imediatamente 
sob o elemento (nó) na árvore. Se o texto estiver em um único nó 

de texto sem nenhum elemento HTML adicional, então o nó estará 
localizado no primeiro filho. Assim: 


document .getElementById (“story”) .firstChild.nodeValue 


<p id="story”> 
ELEMENTO 


Você não está sozinho. 


</p> 
“Você não 
Você não está sozinho. 


Poder do 
cérebro 


Como você mudaria o texto de um nó 
usando o DOM? 
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problema com os filhos 


Como mudar o texto do nó com DOM 


Se você puder supor com segurança que um nó tem apenas um filho que mantém 

seu conteúdo de texto, então será possível simplesmente atribuir o novo conteúdo 
de texto ao filho usando sua propriedade nodeVa lue. Essa abordagem funciona 
muito bem, novamente, mas apenas se houver um único nó-filho. 


document .getElementById (“story”) .firstChild.nodeValue = “OK, talvez você esteja sozinho.”; 


ELEMENTO 


O novo conteúdo do texto substitui 


7 
o conteudo existente no filho, TEXTO 


“ok, talvez você não estejá sozinho.” j 


Mas as coisas nem sempre são tão simples. O que acontecerá se 
um nó tiver mais de um filho? Como este código: 


<p id=”story”> 
Você não <strong>está</strong> sozinho. 
</p> 


TEXTO 


Éste parágrafo divide-se “você não” 


em diversos nos-filhos, 


“está” 


Mudar o combeúdo no primeiro e 4 
filho não é suticieme ara, mudar nara pa 
P Fag no combeido 


o conteúdo inteiro do par agr afo. do parágrafo, 


existem diversos 


7 
Se substituirmos apenas o primeiro filho, os nós-filhos restantes ainda nos-filhos, 
existirão e teremos alguns resultados estranhos como estes: 


document .getElementById (“story”) .firstChild.nodevalue = “OK, talvez você esteja sozinho.”; 


O, [ CK, talv ez você esteja ez você esteja sozinbX Ação esteja E | 


Penas o primeiro filho e substituido, 
o que ainda deixa o comteúdo restante 
e alguns resultados contusos. 

360 Capítulo 8 


ars 


como disputar a página 


Três etapas (seguras) para mudar o texto do nó 


O problema em mudar o conteúdo de um nó alterando apenas o primeiro filho 
é que ele não se decompõe nas expectativas dos outros nós-filhos. Portanto, para 
mudar o conteúdo de um nó, realmente devemos limpar todos os seus filhos e, 
então, adicionar um novo filho que contenha o novo conteúdo. 


O Remova todos os nós-filhos. 
O Crie um novo nó de texto com base no novo conteúdo. 


(3) Anexe o nó do texto recém-criado como um nó filho. 


Podemos fazer isso com três métodos DOM: 


O removeChild( ) 


Remove um nó filho de um nó; 
transmita o nó-filho a ser removido. 


(2) createTextNode( ) 


Cria um nó de texto a partir 
de uma string de texto. 


O appendChild( ) 
PP 


Adiciona um nó como o último filho do 
nó; transmite o nó-filho a ser adicionado. 


Para mudar o conteúdo do texto no exemplo “você não está sozinho”, temos que 
realizar essas três etapas, primeiro removendo todos os nós-filhos, então criando 
um novo nó de texto e, finalmente, anexando o nó de texto ao parágrafo. 


Primeiro, obtenha a elemento 
4 
Cno) usando sev L). 


var node = document .getElementById (“story”); 
EAT T TRET 
while (node.firstChild) 0 Kemova é comi filho afe que 
node -removechild (node .firstchila) ; MO haja mais nos-filhos, 


node. appendChi ld (document .createTextNode (“OK, talvez você esteja sozinho.")); 


Crie um no de texto novo, 


Depois de remover 
1 
Hodos os nos-filhos, 
1 a 3 
anexe o novo no de OK, talvez você esteja so: 


texto ao nécpai, 
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DOM exposto 


Blocos de construção DOM 


Entrevista desta sema 


O nó debate sobre o critério das 


árvores DOM 


Use a Cabeça: Fiquei sabendo que você é a menor 
unidade de armazenamento em uma árvore DOM, um 
tipo de átomo para o conteúdo HTML. É verdade? 


Nó: Não estou certo sobre como minha atomicidade, 
mas, sim, represento uma parte separada de informação 
em uma árvore DOM. Considere o DOM como uma 
divisão, em cada página Web, em partes minúsculas de 
informação... e eu sou essa parte! 


Use a Cabeça: Por que isso importa? Quero dizer, é 
realmente importante ser capaz de dividir uma página 
Web em pequenas partes de dados? 


Nó: Será importante apenas se você for acessar ou 
alterar as informações em uma página Web. Muitos 
scripts importam-se com isso, neste caso o DOM 
importa-se muito. Mas a razão real que importa é porque 
dá muito poder ser capaz de desmontar uma página Web 
em todos os seus pequenos fragmentos ¢ partes. 


Use a Cabeça: Você não corre o risco de perder uma 
parte ao separar uma página? Muitas pessoas separam 
algo apenas para ter os fragmentos para uma futura 
consideração e o que fazem sem seguida é danificar a 
coisa. 


Nó: Não, não é um problema com o DOM, pois você 
não tem que separar literalmente nada para acessar 

uma página Web como uma árvore de nós. O DOM 
fornece a exibição de árvore independentemente de você 


planejar, de fato, fazer qualquer modificação na forma ou 
aparar os dados Web. 


Use a Cabeça: É um alívio. Mas se eu realmente quiser 
fazer algum corte da página Web, é onde você entra? 


Nó: Sim. Exceto que você não está limitado ao corte — 
está livre para adicionar à árvore de dados Web também. 


Use a Cabeça: Oba, é muito surpreendente. Como isso 
funciona? 


Nó: Bem, lembre-se de que cada parte da informação 
é modelada na árvore como um nó. Portanto, você 
pode passar por mim para acessar qualquer coisa em 


362 Capítulo 8 


uma página. Ou pode criar partes inteiramente novas de 
dados Web ao me usar e, então, adicioná-las à árvore. O 
DOM é realmente bem flexível. 


Use a Cabeça: É ótimo. Algo que ainda me confunde, 
porém, é como você se refere aos elementos. Vocês são 
realmente a mesma pessoa? 


Nó: Sim, na verdade somos. Mas vou um pouco mais 
longe. Lembre-se de que um elemento é apenas outro 
modo de ver uma tag como, por exemplo, 

<div> ou <span>. Todo elemento em uma página é 
representado por um nó na árvore de documentos, 
portanto nesre sentido, o elemento e eu somos os 
mesmos. Porém, também represento o conteúdo 
armazenado dentro de um elemento. Portanto, o texto 
armazenado em um <div> também é seu próprio nó, 
armazenado logo abaixo do nó div na árvore. 

Use a Cabeça: Parece um pouco confuso. Como posso 
saber a diferença entre os elementos e seu conteúdo? 


Nó: Bem, primeiro de tudo, o conteúdo armazenado 
em um elemento, ou nó, sempre aparece como um filho 
do nó na árvore DOM. E, segundo, todos os nós são 
distinguíveis pelo tipo: um nó do elemento tem o tipo de 
nó ELEMENTO, ao passo que seu conteúdo de texto 
tem o tipo de nó TEXTO. 


Use a Cabeça: Então, se eu quiser acessar o conteúdo 
de texto de um elemento, simplesmente procuro o tipo 
de nó TEXTO? 


Nó: Você poderia; apenas lembre-se de que a 
propriedade node Type de fato retorna um número para 
cada tipo de nó, Por exemplo, o tipo de nó TEXTO é 3, 
ao passo que ELEMENTO é 1. Mas mesmo isso não 
é realmente necessário porque tudo que tem a fazer é 
procurar os filhos de um nó do elemento para acessar 
seu conteúdo. 


Use a Cabeça: Compreendo. Bem, obrigado pelo seu 


tempo e por mostrar as maravilhas da árvore DOM. 


Nó: De nada. E se quiser alguma cirurgia na árvore, não 
se esqueça de me procurar! 


Não existem 
P: Ainda estou um pouco A 
confuso com os nós-filhos e Perguntas Idiotas 
como eles são organizados. Por 
exemplo, como a propriedade , bi 


childNodes funciona? 


R: Quando um nó contém dados, o 
nó é considerado um nó-pai e os dados 
nele são percebidos pelo DOM como 
nós-filhos. Se os dados consistirem em 
qualquer coisa diferente dos dados brutos 
do texto, então eles serão divididos em 
vários nós-filhos. Os nós-filhos sob 
um nó-pai aparecem na propriedade 
childNodes do pai como um array 
e sua ordem no array coincide com a 
ordem na qual eles aparecem no próprio 
código HTML. Portanto, o primeiro nó- 
filho no array chi láNodes pode ser 
acessado usando chi ldNodes [0]. 
O array pode também ser percorrido 
com um loop para acessar cada um 
dos nós-filhos. 


p teatres 


H 
nos-filhos, 


“Você näo” 


\ 
ptlemenrt.childNodes [O ] 


O elemento strong 


Fem um na-filho. 


=) Ímãs de geladeira JavaScript 


pÉlem.childhlodes [2] 


pos | “sozinho” 


como disputar a página 


P: No código que remove 
todos os nós-filhos de um nó, 
como funciona a condição de 
teste do loop while? 


R: O teste do loop while é assim: 
while (node.firstChild) 


O que este teste está fazendo é a 
verificação para saber se o nó ainda 
contém um primeiro nó-filho. Se ainda 


— Bhouver um primeiro nó-filho, sua 


sença resultará em um valor true 
no contexto do loop while e o loop 
continuará em outra iteração. Se não 
houver nenhum primeiro nó-filho, isso 
significará que não há nenhum filho. 
E se este for o caso, o código node . 
firstChi ldresultaráemnul1, que 
é convertido em false no contexto 
do loop while. Portanto, o que está 
realmente acontecendo é que o loop 
whi le verifica para saber se o primeiro 
nó-filho é nu 1, que é uma evidência 
conclusiva de que não existe nenhum 
outro nó-filho à espreita. ~- 


A versão compatível com o DOM da Aventura do Boneco de Palito não tem várias 
partes do código importante. Use os ímãs abaixo para terminar o código que muda 
o texto do nó para o elemento de texto da cena. Os fmãs podem ser usados mais de 


uma vez. 


ji atualize o texto 


de descrição da cena 


appendChild 
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solução dos ímãs JavaScript 


Solução dos imãs de geladeira JavaScript 


A versão compatível com o DOM da Aventura do Boneco de Palito não tem várias 
partes do código importante. Use os ímãs abaixo para terminar o código que muda 
o texto do nó para o clemento de texto da cena. Os ímãs podem ser usados mais 


de uma vez. 
Esso 1 D loop combinvará À mensagem deve 
ro Errar a pi SEI MENpÉrES rrendo, Primeiro, obtenhao ser texto puro 
E ELERS ENER eo ara gue um elemento de texto da sem formatação 


7 
Fenha nos-filhos, primeiro filho exista, cena usando sev Z), ov Fags HruL. 
comtinve no loop. T 


// Atualize o texto de descrição da cena 


neText sceneText 
sceneText firstChild i 


gx E message 
sceneText - appendcha lo va oiebelop sh piada m 


~ / 4 

Continve removendo o Agora que não ha filhos, Com todos os nos-filhos 

7 1 
primeiro filho restante anexar o novo no de N removidos, um novo no de 

7 h 1 
do no de texto da texto ira assegurar gue o texto é criado e adicionado 
~ , 4 4 

cena ate gee não reste comteúdo servira como um como um filho da no de 
nenhum filho, substituto completo, texto da cena, 


= Embora não seja um padrão Web, a = O DOM vê uma página Web como uma 
propriedade innerHTML fornece acesso árvore hierárquica de nós relacionados. 
a todo o conteúdo armazenado em um 


m A alternativa DOM de mudar o conteúdo 


el ; ae 3 
Ep a da página Web com innerHTML envolve 
= O Document Object Model, ou DOM, remover todos os nós-filhos de um elemento 
fornece um mecanismo padronizado de e, então, criar e anexar um novo nó-filho que 


acessar e modificar os dados da página Web. contém o novo conteúdo. 
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como disputar a página 


Aventura compatível com padrões 


Cara, parece divertido! A marca de qualquer boa aventura é a 
compatibilidade com os padrões... ou não. Mas pode ser uma boa coisa 
no contexto dos aplicativos Web modernos. E o mais importante, veja 
as mudanças drásticas que a abordagem DOM para alterar o texto de 
descrição da cena trouxe para a Aventura do Boneco de Palito... 


Fig Adventure E e 
DO 


Espere um minuto... 
o fexto de descrição 
da cena parece igual 
ao amterior! 
| 


ji 


/ 


A 
You are sanding on the bridge overlooking a penceful sat 


O DOM é um modo 


Hmm. Tudo bem, então talvez a página não pareça 


diferente, mas internamente ela segue os últimos padrões padrão de manipular 
Web graças ao seu uso do DOM. Nem tudo no código 

JavaScript pode ser apreciado visualmente e neste caso, a HTML que permite 
nossa satisfação com a versão produzida pelo DOM da a 

Aventura do Boneco de Palito terá que vir de dentro. mais controle do gue 


usar a propriedade 
inner HTML. 
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como melhorar suas opções 


À procura de melhores opções 


Então, agora, o texto dinâmico de descrição da cena foi revisado duas vezes, mas 
aqueles botões de opção obscuros ainda continuam na Aventura do Boneco de 
Palito. Certamente, algo poderia ser feito para tornar a navegação da história um 
pouco mais atraente e clara do que escolher entre os números 1 e 2! 


Sei que eles terminaram o trabalho, 
mas os botões de opção realmente 
são inexpressivos. Eles deveriam ser 
muito mais descritivos. 


Please choose: 1 | 2 | 


/ 


à Ap 

Os botões de opção numéricos simplesmente — 

não se encaixam — eles não dizem nada sobre 
7 


a decisão ques usuario encara. 


Uma melhoria razoável para os botões de opção seria mudá-los 
para que, de fato, reflitam as decisões disponíveis, Eles poderiam 
incluir texto nos botões informando exatamente o que são as 
duas opções em cada ponto, assim: 


Agora,as opções estão 


I 
o elhor: ay 
Muito f s decisoes. 


desempenham o papel da 


Pense, realmente não há nenhuma razão para termos que usar 
os botões do formulário para isso — qualquer elemento HTML 
que possa conter texto poderia funcionar possivelmente. Os 
estilos CSS poderiam ser usados para arrumá-los e fazer com 
que se pareçam mais com controles de entrada. 


Poder do 
cérebro 


Como você implementaria as opções baseadas em dados na Aventura do Boneco de 
Palito para que elas exibam o texto da opção específico para cada cena diferente? 


366 Capítulo 8 


como disputar a página 


Como construir opções melhores e mais claras 


Como as opções de tomada de decisão novas e melhoradas na Aventura do 
Boneco de Palito são elementos HTML que contêm texto, o DOM pode 
ser usado para alterar dinamicamente o texto de decisão em cada cena. 
Isso significa que cada cena definirá seu texto de decisão junto com sua 
descrição. E também significa que a função changeScene ( ) precisará 
de duas variáveis novas para armazenar este texto de decisão, decisionl e 
decision2. 


Eis como poderíamos definir o texto de decisão da Cena 1 quando ele for para 
a Cena 3 na função changeScene ( ): 


curScene = 3; 


message = “You are standing on the bridge overlooking a peaceful stream.”; 


BESSA - “walk across Bridge”; 


As variaveis decision/ e 
decision? são usadas para 
armazenar o texto de decisão da 
cena para uma determinada cena, 


s fponto seu Lápis i 
As opções dinâmicas na Aventura do Boneco de Palito requerem 


uma nova abordagem para o modo como as opções são 
representadas no código HTML. Escreva o código para os novos 
elementos de texto que substituem os botões <input> existentes. 


“Gaze into Stream”; 


Sugestão: A classe de estilo CSS para os novos elementos é 
chamada “decision” e o conteúdo do primeiro elemento é 
inicialmente definido para “Start Game”. 


Keescreva o 


7 
codigo para as 
1) 2 ás dê / 


opções dinâmicas! 


Please choose: 


- ="changescene(1)* /> 
e id |="decisionl” value="1" onclick=' changeScene (1. E 
com Meet 2” value="2" onclick="changeScene(2)” /> 


<input type="button” id="decision! 
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solução inteligente 


enfrente seu Lápis 

a Solução As opções dinâmicas na Aventura do Boneco de Palito requerem 
uma nova abordagem para o modo como as opções são 
representadas no código HTML. Escreva o código para os novos 
elementos de texto que substituem os botões <input> existentes. 


Sugestão: A classe de estilo CSS para os novos elementos é 
chamada “decision” e o conteúdo do primeiro elemento é 
inicialmente definido para “Start Game”. 


Keescreva o 


7 
Please choose: 1] 2 codigo para as A 
opçoes dinamicas: 


=" changeScene (1)” /> 
ene(2)” /> 


value="1" oncl 


m ” ide"decisionl” 
pera 2” onclick="chang 


» id="decision2” value= 


<input type= 
<input type="button 


Substituir o texto do nó 
parece uma tarefa que seria 
útil ter em uma função. 


Como repensar a substituição do texto do nó 


Agora, tudo o que está faltando na Aventura do Boneco de Palito 

para o novo texto de decisão dinâmico é o código que realmente 
define o texto para os novos elementos span. Esse código está 
basicamente fazendo a mesma coisa que o código DOM que 
escrevemos anteriormente no capítulo, que muda dinamicamente o 
texto de descrição da cena. Na verdade, isso traz um problema porque, 
agora, precisamos executar a mesma tarefa exata em três elementos 
diferentes: a descrição da cena c as duas decisões da cena... 
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como disputar a página 


Como substituir o texto do nó com uma função 


A fanção de substituição do texto do nó geral é algo útil e não apenas na Aventura 
do Boneco de Palito. Esse tipo de função opera de modo muito parecido com o 
código de substituição do texto de descrição da cena que vimos anteriormente, 
exceto que desta vez o código trabalhará nos argumentos da função. 


És + 4 
O TD do no cujo conteúdo sera substituido, 
function replaceNodeText (id, newText) ( 


/ 
Ñ O novo comteúdo do Fexto para substituir no no. 


A função replaceNodeText ( ) personalizada aceita dois argumentos: o ID 
do nó cujo conteúdo será substituído e o novo texto para colocar no nó. Use essa 
função para mudar o conteúdo de texto de qualquer elemento em uma página que 
possa manter texto. Na Aventura do Boneco de Palito, a função permite, agora, 
mudar dinamicamente o texto de descrição da cena e o texto para as duas decisões 
simultaneamente... mas, claro, você precisa escrevê-lo primeiro. 


Substitua o texto de descrição 
da cena por uma nova mensagem, 


Pá 


('scenetext”, message); 


/ 

Po invés de duplicar 
7 x 

o mesmo codigo Fres 


A RE ATE ATN : 
vezes, a função é oE decisioni”, decisionl); 
chamada +res vezes, Epe accision2”, decision2); 


Mude o texto de decisão de 
cada uma das duas decisões. 


aporte seu Lápis 
Escreva o código para a função replaceNodeText ( ),a função geral 


para substituir o texto dentro de um nó que é referenciado pelo ID. 


Não se esqueça de que a função aceita dois argumentos, id e newText., 
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fponte seu Lápis 
Solução 


Escreva o código para a função replaceNodeText ( ),a função geral 
para substituir o texto dentro de um nó que é referenciado pelo ID. 


Obtenha o elemento 
usando sev TD 


exclusivo, om } 4 
4 


Kemova todos os 


filhos do nó, —< 


Não se esqueça de que a função aceita dois argumentos, id e newText. 


Crie um novo 

elememta-filho de 

Lento usando o 

texto transmitido A sunção erenfeTextNlade( esti disponivel apenas 

para a função, na objeto do documenta e não Fem nenhuma ligação 
direta com um determinado nó, 


As opções dinâmicas são algo bom 


As novas decisões de texto dinâmicas na Aventura do Boneco de Palito são muito 
mais claras do que seus correspondentes com botões obscuros. 
a 


Dinâmico, 
descritivo, 
encantador! 


E 'S novas decisões dinamicas 
permitem gee os usuárias 
Saia exatamente quais 
São suas opções em cada 
ponta na historia, 
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FP: Por que os elementos span 
são usados para as decisões 
da Aventura do Boneco de 
Palito, em oposição aos 
elementos div? 


R: Porque os elementos de decisão 
precisam aparecer lado a lado, o 
que significa que eles não podem 
ser elementos de bloco que iniciam 
em uma nova linha. Um div é um 
elemento de bloco, ao passo que 
span está em linha. Em linha é o que 
desejamos para as decisões, portanto 
span é o bilhete de entrada. 
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Não existem 
Perguntas idiotas 


P: Quando crio um novo T: O conteúdo de um 
código com createTextNode( nó de texto criado com 
), onde fica o nó? createTextNode( ) tem 
que ser apenas texto? 

R: Em nenhum lugar. Quando um novo 
nó do texto é criado pela primeira vez, 
ele fica no limbo, pelo menos em relação 
à árvore DOM para uma determinada 
página. Fica assim até que você anexe 
o nó como um filho de outro nó que 
realmente é adicionado à árvore, que 
então o adiciona à página. 


R: Sim. O DOM não funciona como 
O innerHTML, onde você pode 
atribuir texto com tags misturadas 
nele. Quando o DOM fala sobre um 
“nó do texto”, ele realmente quer dizer 
texto puro sem nenhuma outra tag ou 
formatação adicionada. 


As opções interativas são ainda melhores 


Portanto, as decisões de texto dinâmicas na Aventura do Boneco de Palito são uma 
melhoria sobre suas antecessoras obscuras, mas poderiam ser melhores ainda. Por 
exemplo, elas poderiam destacar-se quando o ponteiro do mouse passar sobre elas 
para deixar claro que são clicáveis. 

O elemento do texto de 
decisão destaca-se guando 
a usuário passa a ponteiro 
do mouse sobre ele, 


Walk around Back Knock on Door | 


Pensei que os efeitos visuais 
de destaque e extravagantes 
fossem associados à CSS, e 
não ao DOM. 


O destaque está associado à CSS, mas o 
DOM ainda está envolvido diretamente. 


Destacar um conteúdo da página Web é, na verdade, um problema da 
CSS porque envolve ajustar a cor do segundo plano de um elemento. 
Mas o DOM também entra na equação do destaque porque fornece 
um acesso programático aos estilos CSS dos elementos... 
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estilos DOM com classe 


Uma questão de estilo: CSS e DOM 


Os estilos CSS estão ligados aos elementos HTML e o DOM fornece acesso aos 
estilos através dos elementos (nós). Usando o DOM para ajustar os estilos CSS, 

é possível manipular dinamicamente a apresentação do conteúdo. Um modo dos 
estilos CSS serem exibidos através do DOM é na classe style de um elemento, que é 
onde um grupo (classe) de estilos é aplicado a um elemento. 


<span id="decisionl" Maese onclick="changescene (1) “>Start Game</span> 


<span id="decision2” EBSSESHESISIGRA onc1ick="changescene (2) "></span> 


«style type="text/css"> 
span.decision { 


font-weight :bold; 


Å classe style de 
~ s 

decisão € o que da as 

decisões seu apelo visual, 


porder:thin solid #000000; 


padding: px; 


background-color :#DDDDDD: 


} 


</style> 


O DOM fornece acesso à classe de estilo de um elemento 
através da propriedade className do objeto de nó. 


alert idocument .getElementById (“decisionl”) -ClassName) f Tente não 


A - confundir as 
Preste atenção! Classes de 


A propriedade className 
fornece acesso a classe de 
estilo de um elemento. 


estilo CSS com as 


classes JavaScript. 
As classes de estilo CSS e as classes 
JavaScript são muito diferentes. Uma 
classe de estilo CSS é uma coleção de 
estilos que pode ser aplicada em um 
5 elemento na página, ao passo que uma 
À propriedade className classe JavaScript é um modelo para criar 
A 2 os objetos JavaScript. Descobriremos 
de um nô fornece acesso È os detalhes das classes JavaScript e dos 


n a objetos no Capítulo 10. 
à classe de estilo. i 
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decision 


(= 
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7 
Como trocar as classes do estilo 
Para mudar a aparência de um elemento usando um estilo de classe completamente 
diferente, simplesmente mude o nome de sua classe de estilo para uma classe de 
i À classe de estilo decisioninverse 
ø inverte o esquema de cor do 
y texto de decisão, 


document .getElementById (“decisionl”) .className = “decisioninverse”; 


O mesmo elemento de decisão, 
/ 
classes de estilo diferentes! 


<style type="text/css"> 


span.decisioninverse ( 


font-weight:bold: 


Uma nova classe de estilo 
é aplicada no entra de 
decisão usando class lame. 


font-color:#FFFFFF; 


border:thin solid #DDDDDD; 


padding: 5px; 


background-color:+C00000; 


Ser cane 


</style> 


Mudar a classe de estilo de um elemento usando a propriedade className 
muda imediatamente a aparência do elemento para a nova classe de estilo. Esta 
técnica pode ser usada para fazer mudanças visuais drásticas nos elementos em 
uma página com um esforço de codificação relativamente pequeno. 


Bia 
agent seu Lápis 
Usando os eventos do mouse onmouseover e onmouseout, adicione 


código aos elementos de decisão <span> na Aventura do Boneco de Palito 
para que eles mudem as classes de estilo para obter um efeito de destaque 
quando o mouse passar. 


Sugestão: A classe de estilo “mouse sobre” é denominada deci sionhover. 


<span id="decisionl” class-"decision” onclick="changescene (1) ” 


in: ipa ag e open ce o A SA >Start Game</span> 


<span 1d="decision2” class="decision” onclick="changeScene (2)” 
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solução inteligente 


Aponte seu Lápis 
~N Solução 


Usando os eventos do mouse onmouseover e onmouseout, 
adicione código aos elementos de decisão <span> na Aventura 
do Boneco de Palito para que eles mudem as classes de estilo 


A classe de estela decisiankaver PATA obter um efeito de destaque quando o mouse passar. 


é defi 


ida em resposta ao Sugestão: A classe de estilo “mouse sobre” é denominada 


evento onmouseover. decisionhover. 
À <span id="decisionl” class="decision” onclick="changeScene(1)” 
onmouseover="this.className = 'decisionhover'“” 


Este eventa é 
inicializado quando 


o ponteiro do 
<span id=”decision2” class="decision” onclick="changescene (2)” 
mouse move-se —, 


decision" ” sstart Game</span> 


onmouseout="this.className 


sebreo elemento onmouseover="this.className 'decisionhover” ” 
spam, 
O estrito de decisão sem NO Enfeevento É nicinigado vande a ponteiro da mause 


destagve É armazenado em sai do elemento span, 
resposta as evento anmausesut. 


Não existem 


Perguntas Ídiotas 
P: Não posso simplesmente usar o CSS para criar botões 


Opções de classe 


Aplicar as classes de estilo no que se destacam quando o mouse move-se sobre eles? 

código da Aventura do Boneco 

a ag EEEN R; sim. E, em muitos casos, esse é um modo melhor de criar botões 
a "mouse sobre" porque o CSS é mais suportado do que o JavaScript nos 


diferentes para os elementos de 
decisão: normal e destacada. 


navegadores como, por exemplo, em alguns dispositivos móveis. Porém, 
a Aventura do Boneco de Palito é um aplicativo JavaScript e faz todos os 
tipos de coisas que são impossíveis de fazer no CSS apenas. Portanto, 
neste caso não é uma obrigação usar o JavaScript para os botões de 
decisão da cena. 


<style type="text/css"> 


«style type-"text/css 


span .decision ( span.decisionhover ( 


font-weight:bold: font-weight:bola; 


À única diferença 
entre as duas 

classes de estilo é a 
cor do segundo plano, 


border:thin solid #000009; 


border:thin solid #000000; 


padding: 5px; padding: Spx; 


-color : fDDDDDD; 
background-color :#DDD! background-color :#EEEEEE; 


, 


, 


</style> 


</style> 


— 
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Faça um ‘test drive” das opções da aventura estilizada 


A interface do usuário para a Aventura do Boneco de Palito agora está melhorada 


graças à habilidade do DOM em mudar a classe de estilo de um elemento sob 


demanda. Ellie está muito contente com seu script. 


Adro a 


You have amived at a cut nha poe in jae wgads. 


Knock ou Door] — 


27 na 


0 


Oba, o novo efeito de 
destaque quando o mouse 
move-se é excelente! 


Os elementos de decisão agora 
se destacam suando o ponteiro 
do mouse passa sabre eles, 


P: Não me lembro dos 
eventos onmouseover e 
onmouseout. São eventos 


padrões? 


R: Sim. Na verdade, existem muitos 
eventos JavaScript padrões que não 
exploramos. Mas o importante sobre 
os eventos é como você pode reagir 
a eles, mesmo quando não sabe 
necessariamente tudo sobre eles. 
No caso dos dois eventos do mouse, 
seus nomes são realmente tudo o 
que precisava saber para entender 
que um deles é inicializado quando o 
ponteiro do mouse move-se sobre 
um elemento e o outro inicializa-se 
quando o ponteiro do mouse sai de 
um elemento. 


existem 
Perguntas İdiotas 


P: Por que não foi necessário 
usar getElementById( ) no 
código que define a classe 
de estilo dos elementos de 
decisão? 


R: Todo elemento no JavaScript é 
um objeto e no código HTML para 
um elemento temos acesso a esse 
objeto através da palavra-chave this. 
Portanto, no código da Aventura do 
Boneco de Palito, a palavra-chave thi s 
refere-se ao objeto-nó do elemento 
span. E esse é o mesmo objeto com a 
propriedade className que acessa 


sua classe de estilo. Portanto, mudar 
a classe de estilo envolve apenas 
definir this. className. 


P: As classes de estilo são 
legais, mas eu realmente 
gostaria de mudar apenas 
uma propriedade do estilo. 
É possível? 


R: Opa, que intuição! Há um 
problema chato na Aventura do 
Boneco de Palito que Ellie estava 
ansiosa para resolver. E acaba que 
envolve o uso do JavaScript e do 
DOM para manipular as propriedades 
do estilo individualmente... 
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onde os botões não tém nome 


As opções estão erradas: o botão vazio 


Tem sido assim o tempo todo e até o momento Ellie enfrentou com sucesso. 
Mas é hora de prosseguir e endereçar a esquisitice associada às decisões vazias na 
Aventura do Boneco de Palito. Em algumas cenas, há apenas uma decisão viável, 
ainda que ambos os elementos de decisão sejam exibidos, como a tela aqui. É 


um pouco inquietante para o usuário ver um elemento de decisão interativo sem 
nenhuma informação nele. 


Tem me chateado ver que 
algumas cenas têm opções vazias. 
Uma opção vazia não faz muito 
Stick Figure Adventure o Sentido e pode apenas causar 
000. dis = - aos: confusão. 


Welcome to 


STICK FIGURE 
ADVENTURE 


Click either 
Q J button to D elememto de 
rá start. decisão vazio € 


é 2 estranho € confuso. 


[erce] 


Poder do 
cérebro 


Quais as outras cenas têm o problema da opção vazia? 


Quais as opções existem para corrigir isso? 
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Ajuste do estilo à la carte À propriedade de 


Algumas vezes, mudar a classe de estilo inteira de um elemento é É n 
demais, Para os momentos em que um pouco mais de granularidade é estilo de um né 
pespldado de um jean é ras do as esa indo SeIMiECO ApONSO ÀS 
dead pa mosar o otalar os eemenos No HTM da Aonde PrPriedades de 
ppa pé iu TER de decisão pode ser ocultado estilo Individuai s- 


<span id="decision2” class="decision” onclick="changeScene (2) ” 
onmouseover="this.className = ‘decisionhover’” 
onmouseout="this.className = “decision!” 
></span> 


Deste ponto em diante, mostrar e ocultar o elemento é apenas uma questão de 


definir a propriedade de estilo visibility para visible ou hidden. Start Game [| j 
document ,getElementById (“decision2“).style.visibility “visible”; 


e fponto seu Lápis 


Segunda opção. 


Algumas cenas na Aventura do Boneco de Palito devem 
alterar a v idade do segundo elemento de opção ao mudar 
para uma nova cena. Circule essas cenas e, então, anote a 
decisão onde cada cena deve exibir ou ocultar a opção. 


Cena 8 
= e 
Gema? Continua... DE” 
F- 
` 


Conab Goma t 
Introdu Bifurcação 
Tam naostrada 
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Aponte seu Lápis 
~N Solução 


Segunda opção. 


Algumas cenas na Aventura do Boneco de Palito devem 
alterar a visibilidade do segundo elemento de opção ao mudar 
para uma nova cena. Circule essas cenas e, então, anote a 
decisão onde cada cena deve exibir ou ocultar a opção. 


[Start Game] [| O segundo elemento de decisão deve 
ser ocultado em gualguer cent ne leve 
uma decisão 


a uma cena com apenas 


inicia ovo jogo. 
como, por exemplo, iniciar um novo jogi 


O segundo elemento 
de decisão precisa / 
apenas ser mostrado Buando o jogo Fermina, o segunda N 
uma vez, guando um elemento de decisão deve ser ocultado A 
novo jogo inicia, mas a mudança Fem sue ertrar na as, 
levando ao final do jogo, 


Cada cena deve mostrar ou ocultar o 
segunda elemento de decisão usando a 


tty do objeto de estilo. 


case 7: 
if (decision == 1) 


curscene = é =. 
message Sorry, you became 


decisionl = "Start over"; 


decision? = 


ESTE ibility = “hidden” 
I oulre a remonta Tado sion2") style. visibilit: his 
É tey 
document .getElemen' 
ns = 


t 
the troll's tasty lunch. ”; 


) 
else | 


curscene = 9: | 
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Qy Pontos de Bata 


m Os elementos em uma 


= A propriedade do nó className faz grandes página podem ser exibidos 
mudanças de estilo alterando a classe de estilo ou ocultados dinamicamente 
inteira de um nó. usando a propriedade do estilo 


= A propriedade do nó style faz pequenas visibility do objeto do 
mudanças de estilo fornecendo acesso às elemento. 
propriedades de estilo individuais de um nó. À propriedade de estilo para exibir 
= Uma classe de estilo CSS não tem nenhuma pode conseguir um efeito exibir/ 
relação com uma classe JavaScript — são coisas ocultar parecido definindo-s 
completamente diferentes. para display:none Cocultar3 ou 


displagiblack Cexíbird, 


Mais nenhuma opção falsa 


Manipular estilos individuais usando o DOM permite ao segundo elemento de decisão 
ser mostrado c ocultado seletivamente. O resultado final é uma interface do usuário 
que faz muito mais sentido agora que os elementos de decisão vazios acabaram. 


00 
na Amir Ni 
Ah, muito melhor... 
aquelas decisões vazias 
eram realmente chatas! 
Welcome to 


STICK FIGURE 
ADVENTURE 


flick either 


O segundo elements de decisão é agora 
ocultado quando não E necessária 
coma, por exemplo, o +rtulo da cena, 
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grande árvore de decisão 


Mais opções, mais complexidade 


Ellie prevê o crescimento da história Aventura do Boneco de Palito com grande 
velocidade para mostrar todos os tipos de cenas novas interessantes e decisões. Há 
modos em que o DOM pode decompor-se para ajudar a lidar com a complexidade 
de uma narrativa da Aventura do Boneco de Palito muito mais profunda, 


Ceat 
Braxa 
na 
cem? 
Casinha 
na fioresta Comido 
A pela 
bruxa 
FIM 
iat Cena 
Eiturcação Comido 
introdução na est 
so titulo gigante 
E Cema3 FIM 
Ponte 
sobre 
orio Gigante 
na 
ponte 


Aventura mais profunda = Árvore de decisão maior! 


E 4 
* A ditima versão da Aventura do Boneco de Palito esta on-line e 
esperando por sua assistência na codificação, Faça o download em 
as 
www artabooks.com.br, se já não Fiver feito. 
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Cena 14 


eo 


Cena 16 


Oba! São muitas decisões... 
mas parece que seria um 
pesadelo testar. 


Certamente, as grandes histórias podem 
transformar-se em grandes problemas sem 
um meio de testar a árvore de decisão. 


7 Quando a história continua a se desdobrar com muitas 
cenas e decisões, fica cada vez mais difícil testar sua lógica e 
# S assegurar que cada caminho de decisão levará ao lugar certo. 
A Aventura do Boneco de Palito precisa desesperadamente 
de um modo de analisar os caminhos na história. 


Poder do 
cérebro 


O que você acha que poderia ser o melhor modo de criar caminhos 


de teste em tal árvore de decisão monstruosa? 
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seguindo a trilha 


Como controlar a árvore de decisão 


Parecido com o recurso histórico em um navegador Web, que mantém controle da 
sequência das páginas visitadas, um recurso histórico de decisão na Aventura do 
Boneco de Palito pode ser usado para testar e depurar a linha da história. A idéia é 
revelar a série de decisões que leva a um determinado resultado. Fazendo isso, Ellie 
pode assegurar que o caminho de decisão funcionará como o esperado. 


) 


Ei E 


Lo 


O histórico de decisão é construído como uma lista das opções e 
das cenas que ocorrem em um determinado caminho na história. 
Então, o histórico serve como um depurador da história que 
permite a Ellie rastrear as opções e as cenas. 


Início Gena 0 — Introdução do título 


A decisão / © Cena 1 — Bifurcação na estrada. 


é escolhida. 
pese ei Cena 2 — Casinha na floresta. 


wig 4 Cena 4— Brusa na janela. 


o ge leva à cena y. Poder do 
cérebro 


Quais os tipos de mudanças 
que são requeridos para a 
página Web da Aventura do 
Boneco de Palito suportar um 
recurso histórico de decisão? 


4 
Cada cena percorrida e 
A 
adicionada ao historico 
de decisão iurbo com 
a decisão é para 
chegar neste ponto. 
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Como construir o histórico de decisão em HTML 


De uma perspectiva HTML, o código para o histórico de decisão não é 

terrivelmente complexo: um elemento div e um parágrafo de texto para 

cada decisão é tudo o que é necessário. Cada elemento p 
o 


contem uma decisão no 


Tais hi ji 
Ss zator historico de decisã 


<p>Decision 1 -> Scene 1 : Fork in the road.</p> 
<p>Decision 1 -> Scene 2 : Little house in the woods.</p> ba 


<p>Decision 1 -> Scene 4 : Witch in window.</p> 
Um recurso histórico 

Tudo que resta é escrever algum JavaScript para usar o DOM de decisão DA, 
para gerar o histórico de decisão como uma coleção de nós. Aventura Boneco 
de Palito pode ser 
uma ferramenta de 
depuração da história 
muito útil. 


</div> 


E loucura. Você não 
pode simplesmente 
criar novos parágrafos 
à vontade... pode? 


O DOM pode criar qualquer elemento HTML 
à vontade, inclusive parágrafos de texto. 


Na verdade, você pode. E envolve outro método do objeto 

do documento, createElement ( ), que pode ser usado 

para criar qualquer elemento HTML. A idéia é criar um novo 
elemento contêiner usando createElement ( ) e então, 
adicionar-lhe conteúdo de texto criando um nó-filho de texto com 
createTextNode ( ). O resultado final é um novo desvio de 
nós inteiramente novo enxertado na árvore de nós de uma página. 


document . createElement (“p”) ; P j 


document. ed s J3 diy jeen 


TEXTO 


mes va 
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brincando com o HTML 


Como construir o código HTML 


Criar um novo elemento com o método createElement ( ) apenas requer 
o nome da tag. Portanto, criar um elemento (p) do parágrafo simplesmente 
significa ter que chamar o método com um argumento “p”, colocando o elemento 


resultante que é criado. 
q Iniciamos com um nova elemento 


P Hutvando no espaço, 


var decisionElem = document .createElement (“p”); —— 11mm P 5 


Neste ponto, há um novo elemento do parágrafo sem conteúdo e ainda não faz 
parte de nenhuma página também. Portanto, para adicionar o conteúdo de texto ao 
elemento, crie um nó de texto e, então, adicione-o como um filho do novo nó p. 


decisionElem.appendChild (“Decision 1 -> Scene 1 : Fork in the road.”)); 
Pp 


O elemento P ainda esta 
flutuando no Espaço, mas 


“Decision 1 -> Scene 1 Fork in the road.” 
Edo tem algum cormbeúda de Regis SEA TO io a 


xto raças a um novo no- 


filho de texto, 


A última etapa é adicionar o novo elemento do parágrafo à página 
como um filho do elemento div do histórico. 


document .getElementById (“history”) .appendChild (decisionElem) ; 


4 
O elemento p É adicionado como um filho 
de um elemento div existente , e 

4 
mescla o paragrafo na página We Wes, 


“Decision 1 -> Scene 1 : Fork in the road.” 


<div ide”history*> 
<p>Decision 1 -> Scene 1 : Fork ir the road.</p> 
</div> 


Repetindo estas etapas sempre que cada cena é percorrida na Aventura do Boneco 
de Palito, um histórico de decisão poderá ser criado dinamicamente. 
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= Qualquer elemento HTML pode ser criado m Adicionando e removendo 
usando o método createElement ( ) do com cuidado os nós na árvore 
objeto document. DOM, uma página Web pode ser 


desmontada e remontada à vontade. 


m Para adicionar conteúdo de texto a um 
elemento, um nó-filho de texto deve ser criado 
e anexado ao elemento. 


Aponte seu Lápis 


Adicione código à função changeScene ( ) para suportar o recurso 
histórico de decisão na Aventura do Boneco de Palito. Sugestão: Você 
precisará adicionar um novo elemento do parágrafo com um nó-filho 
de texto ao elemento histórico de decisão quando a cena atual não for a 
Cena 0 e limpar o histórico de decisão se a Cena for 0. 


function changeScene (decision) { 


// Atualize o histórico de decisão 
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solução inteligente 


Aponte seu Lápis Adicione código à função changescene (. ) para suportar 
a Sol u ção o recurso histórico de decisão na Aventura do Boneco de 
Palito. Sugestão: Você precisará adicionar um novo elemento do 
parágrafo com um nó-filho de texto ao elemento histórico de 
decisão quando a cena atual não for a Cena O e limpar o histórico 
de decisão se a Cena for 0. 


Anexe o novo na de texto ao : 
qe gerentes pre A Função change Scenet Dja Hem 
Obtenha o diy d uma variavel lacal pc | 
histórica usam -r z decision, portanto essa variavel 
o sev ZD, deve receber outra nome, 
function changeScene (decision) ( 
// Atualize o histórico de decisão ] 


+ 


terna AEN PEPEN A AAN EE TEER LA A EAEI T Ds ur 


4 
div do historica removendo 


Limpe o 
Anexe o Hodos os seus filhos. 
elemento do Crie um novo no de texto comas 
partgrata a div. informações do historico de decisão, 
para adiciona-lo à 


7 
Pagina, 
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Como investigar a história da aventura 


O recurso histórico de decisão na Aventura do Boneco de Palito agora torna 
possível controlar com cuidado a lógica da história quando ela se desdobra. 


Welcome to 


STICK FIGURE 
ADVENTURE 


A 
Niue A historia não iniciou, 


portanto não ha 
nenhum histórica, 


O histórico de decisão é O história 
impressionante! Finalmente, ahi ia 
posso me divertir com aumema 
criatividade e ainda manter a conforme a 
árvore de decisão sob controle. PRN Ta 
istoria se 
desdobra, 


e) ipia: 
To ny eg a i me me 
ns 7 em Yon o a ep a a mea 
Onda mn rp hy ae masi ar a ema 


O caminha da historia se 
h 

completa no historico de 

decisão guando um final è 


atingido. 


is à Somm 3: me MEE = 
os i a Sem ore sp a 
ni à Semme: Sory, e e MTN 
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a história sem fim 


Uma viagem longa e estranha... 


É hora de flexionar seu músculo criativo expandindo a história da Aventura do 
Boneco de Palito para algo que vale a pena fazer alguma depuração séria do 
histórico de decisão. Seu amigo Boneco de Palito está aguardando por aventura... 


Exercicio 


Imagine sua própria continuação da história da Aventura do Boneco de 
Palito e adicione código para incorporá-la no aplicativo Aventura do Boneco 
de Palito para que você possa compartilhá-la on-line como uma aventura 
interativa. 


Não há nenhuma solução para este exercício... simplesmente divirta-se 


imaginando aventuras! 
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9 como dar vida aos dados * 


* Objetos como Frankendados 
Ex 


Uma vez eu desmontei um homem 
inteiro com isto... pode perguntar... 
montei-o de novo depois. 


Os objetos JavaScript não são tão horríveis quanto o bom médico 
que poderia fazer você pensar. Mas eles são interessantes no sentido de que combinam 
os fragmentos e as partes da linguagem JavaScript para que sejam mais poderosos juntos. Os objetos 
combinam os dados com ações para criar um novo tipo de dados que é muito mais “ativo” do que os 
dados vistos até então. Você acaba com arrays que podem classificar a si mesmos, strings que 
podem pesquisar a si mesmas e scripts que podem crescer pêlos e uivar para a lua! Tudo bem, talvez a 
última opção não, mas você pegou a idéia... 


hora da festa 


Uma festa produzida pelo JavaScript 


Há uma festa e você é responsável pelos convites. Portanto, a primeira pergunta é 
quais informações entram em um convite de festa perfeito? 


0 GE pd 


Quem? Quando? 
Senise 


Ações do convite, 
f À sido stage 
Exiba! Envie! 270 cem 


Um convite de festa para o JavaScript exibiria os dados como variáveis e as ações 
como funções. O problema é: no mundo real, a capacidade de separar os dados e as 
ações realmente não existe. 


o que? 


Envie! 


Puzzler Ruby AS 


5280 Unravel Avenue 
Conundrum, AZ 85399 
USA 


October 24th 


Date: 


Location: | 2112 Confounding Street 
Baffleburg, CA 95099 


Onde? Quando? 


No mundo real, o convite combina 
dados e ações em uma única Exibal 
entidade, um objeto. 
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Dados + ações = objeto 


Nem sempre você tem que trabalhar com dados e ações como coisas separadas 

no JavaScript. Na verdade, os objetos JavaScript combinam os dois em uma 
estrutura de dados inteiramente única que armazena dados e atua neles. Essa 
funcionalidade permite ao JavaScript aplicar o pensamento real nos scripts. 
Portanto, você pode pensar em termos de “coisas”, em oposição a separar os dados 
e as ações. 


Ao ver o convite da festa, em termos de objeto JavaScript, pode conseguir isto: 


Dados Ações Objeto 


var who; function display (what, when, where) ( 


var what; + 


function display() { 


var when; } 


var where; function deliver (who) { } 


var who; 


function deliver () 


t 


var what; 


var when; 


var where; 


Fora de vm objeto, os dados tem se 
ser transmitidos para as funções 
como argumentos, 


Dentro do objeto convite, os dados e as funções, agora, coexistem 
e têm ligações mais íntimas do que tinham fora dele. Mais s o ie 
especificamente, as funções colocadas em um objeto podem Os obj etos ligam 
acessar as variáveis no objeto sem ter que transmitir as variáveis 
para as funções como argumentos. 


as variáveis e as 
funções dentro de 
um conteiner de 


E armazenamento. 


Os dados dentro do objeto convite são 
acessíveis pelas funções, mas ocultados do 
mundo exterior. Portanto, o objeto serve como 
um contêiner que armazena os dados e liga-os 
ao código que pode executar uma ação neles. 
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o membro tem seus privilégios 


Um objeto possui seus dados 


Quando as variáveis e as funções são colocadas dentro de um objeto, elas são 
referidas como membros do objeto. Mais especificamente, as variáveis são 
chamadas de propriedades do objeto e as funções são chamadas de métodos do 
objeto. Ainda armazenam dados e executam ações nos dados, apenas fazem isso no 
contexto de um objeto específico. 


var who; 


j press: ~ 

var what; T, when, where) As funções 
ion display (what 

var when; functio tornam-se 
h 7 

var where; } metodos do 


deliver (who) 1 


objeto, 


function 


+ 


3 Propriedades; 
As variaveis tornam-se 
prepriedades do objeto, 


var who; 


var what; 


aceda function display() ( 


var where; } 


As propriedades function deliver() | 
e os métodos são 


os equivalentes 
do objeto para As propriedades e os métodos são “possuídos” por um objeto, o 
que significa que são armazenados dentro do objeto de modo muito 


as variáveis e as parecido com os dados armazenados em um array. Porém, diferente 
dos arrays, você geralmente acessa as propriedades e os métodos do 


} 


funções. objeto usando um operador especial chamado operador ponto. 
e objeto E + ns + Propriedade /Método 
O nando abre O nome da propriedade 
J ou do método 
Apenas um porto 
Ceriado), 
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O membro do objeto refere-se com um ponto 
O operador ponto estabelece uma referência entre uma propriedade 0) operador ponto 


ou o método e o objeto a qual ele pertence. E como os primeiros e; 
nomes das pessoas que dizem a você quem elas são, mas seus últimos Tetere-se à uma 
propriedade ou a 


nomes informam a você a qual família elas pertencem. O mesmo é 
para os objetos — um nome da propriedade informa a você o que é a 

propriedade, ao passo que o nome do objeto informa a qual objeto a A o 
propriedade pertence. E o operador ponto conecta os dois. um método de um 
loa epoha DE censos ticos pa o SER aan COBIELO: 

JavaScript usando propriedades e o operador ponto: 


Nome do objeto, Um porto! 
Nome da propriedade, 


invitation.who = “Puzzler Ruby”; 
anvitation.what = “A puzzle party!”; 
invitation.when = “October 24th”; 


invitation.where = “2112 Confounding Street”; 


S O operador ponta é usado para 


acessar cada propriedade. 


Lembre-se de que como os dados e as ações são partes do mesmo objeto, você 
não tem que transmitir nada a um método para ele ser capaz de usar os dados. Isso 
torna bem simples tomar uma ação no objeto convite: 


invitation.deliver (); 


E 


Nome do obj 
Nome do método. ER Sa) 


O convite da festa não tem uma propriedade RSVP que permite aos 

convidados responder se eles irão ou não à festa. Escreva o código para 
Exercício adicionar uma propriedade rsvp ao convite Puzzler Ruby (ela planeja 

comparecer) e, então, chame o método sendRSVP ( ) para enviar a 
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pergunte qualquer coisa 


O operador ponto 
refere-se à 

propriedade e 
ao método do 


Exercício 


invitation.sendRSVP( ); 


objeto convite A 


P: O que é exatamente um 
objeto? Ele tem um tipo de 
dado? 


: Sim, os objetos têm um tipo 
e dado. Um objeto é uma coleção 


número, texto e booleano. Eles são 
lhecidos como tipos de dados 
primitivos porque representam 

uma única parte da informação. Os 

jetos são considerados tipos de 
complexos porque englobam 
partes de dados. Você 

e adicionar um “objeto” como um 
arto tipo de dados à lista dos tipos 
imitivos já conhecida (número, string 
e booleano). Portanto, qualquer objeto 
ou qualquer objeto JavaScript 

e usado tem um tipo de 

os do objeto. 
: Eu não poderia 
isimplesmente usar variáveis 
e funções globais ao invés 
das propriedades e métodos 
Ido objeto? As funções 
podem acessar as variáveis 
globais muito bem, certo? 


: Sim, podem. O problema é 
que não há nada para impedir que 
Jualquer outro código acesse as 
rariáveis globais também. Isso é 
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Não existem 
Perguntas Ídiotas 


problemático porque você sempre deseja 
experimentar e limitar a exposição dos 
dados apenas ao código que realmente 
precisa acessar os dados. Isso ajuda a 
evitar que os dados sejam mudados sem 
querer por outro código. 


Infelizmente, o JavaScript não permite, 
atualmente, que você de fato impeça que 
uma propriedade do objeto seja acessada 
por um código externo. E há situações 
em que, especificamente, deseje que 
uma propriedade do objeto seja acessada 
diretamente. Porém, a idéia é que você 
coloque os dados em um objeto para 
associá-los logicamente ao objeto. Uma 
parte dos dados ligada a um objeto tem 
muito mais contexto e significado do que 
uma parte dos dados flutuando livremente 
em um script (uma variável global). 


P Já vi a notação do objeto 
com o operador ponto usada 
várias vezes. Realmente eu 
estava usando objetos todo 
este tempo? 


R:Sim. Você achará que de fato é 
bem difícil usar o JavaScript sem usar 
objetos e que é por isso que o próprio 
JavaScript é realmente uma grande 
coleção de objetos. Por exemplo, a 
função alert () é tecnicamente um 
método do objeto wi ndow, que significa 
que pode ser chamada com window . 
alert ().Oobjeto window 
representa a janela do navegador e 
não tem que ser referido explicitamente 


O convite da festa não tem uma propriedade RSVP que permite aos 

convidados responder se eles irão ou não à festa. Escreva o código para 
Solução do adicionar uma propriedade rsvp ao convite Puzzler Ruby (ela planeja 
comparecer) e então, chame o método sendRSVP ( ) para enviar a resposta. 


como um objeto, por isso é que você 
pode ter sucesso com O alert () 
sozinho. 


P: Tudo bem, isto é 
realmente confuso. Portanto, 
está dizendo que as funções 
são na verdade métodos? 


R:Sim, embora possa ser confuso 
considerar as funções assim. Você 

já sabe que uma função é uma parte 
do código que pode ser chamada por 


pertence a um objeto. 


Portanto, alert ( ) é uma função 
e um método, o que explica por que 
pode ser chamada como uma função 
ou como um método — a maioria 
dos métodos tem que ser chamada 
como um método usando a notação 
da função. Na verdade, toda função 
JavaScript pertence a um objeto, 
assim tornando-a um método. E em 
muitos casos, esse objeto é o objeto 
window do navegador. Como esse 
objeto deverá ser o objeto padrão se 
nenhum objeto for especificado para 
uma chamada do método como, por 
exemplo, alert ( ), será bom 
considerar esses métodos como 
funções. Sua propriedade pertence! 
ao objeto wi ndow é acidental, pois 
não tem nenhuma conexão lógica 
o objeto. 
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= Quando colocadas em um objeto, 


= Os objetos são um tipo especial de as variáveis ficam conhecidas como 
estrutura de dados que combinam os propriedades, ao passo que as funções 
dados com o código que atua neles. ficam conhecidas como métodos. 
= Em termos práticos, um objeto é m As propriedades e os métodos são 
realmente apenas variáveis e funções referidos fornecendo o nome do objeto 
combinadas em uma única estrutura. seguido de um ponto seguido do nome 
da propriedade ou do método. 


Um blog para os amantes de quebra-cabeças de cubo 


Na outra ponta do convite da festa está Ruby, uma apaixonada por quebra- 
cabeças de cubo que mal pode esperar para se reunir com seus outros amigos de 
quebra-cabeças. Mas Ruby tem mais coisas em mente do que apenas ir às festas 


— ela deseja criar um blog no qual deseja compartilhar seu amor por quebra- 
cabeças de cubo com o mundo. Ela está pronta para começar a compartilhar 
seu saber cubista no YouCube! 


Ouvi dizer que os objetos tornarão 
meu código mais fácil de manter 
quando eu precisar fazer alterações. 
Isso me dará mais tempo para meus 

quebra-cabeças de cubo! 


Ruby ouviu dizer que o JavaScript suporta objetos 
personalizados como um meio de criar um código 
mais robusto e basicamente mais gerenciável. 

Ela também ouviu falar que muitos blogs, 
possivelmente, ficam desatualizados porque os 
bloggers ficam cansados de mantê-los. Portanto, 
Ruby deseja iniciar seu blog com o pé direito 
construindo o YouCube como um script baseado 
em objetos usando objetos personalizados que a 
levarão longe no futuro dos quebra-cabeças. 


kea _ Mais tempo 
orientado a ” do cubo! 
objetos 
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seja o cubo 


Como desconstruir o YouCube 


Ruby, atualmente, tem um diário escrito à mão e ela lê blogs o suficiente para 

saber que o dela precisará consistir em datas e texto, mas não consegue saber O Galuse 
como armazená-los usando o JavaScript. Ela só sabe que continua escrevendo as n o 
entradas do diário de seu cubo (logo será um blog) à mão! escrito à mão, 


08/14/2008 
* Gotthenew cubel ordered. It's areal 
pearl. 


Cada embrada 
consiste em 
uma data 


combinada com 


uma string de 


data 08/19/2008 DE 
M Solved the new cube but of course, now 
x T'm bored and shopping for anew one. o pri 


= ~ — cabeça de cubo 
favorito dë 
Kuby, 


08/16/2008 E 
Managedto get a headache toiling over 
Fhe new cube. 

“Gottanap. 


(4) corpo do 
texto da 
entrada, 


08/2/2008 
daxx]: 
That one could be a beast. 


Um obĵeto personalizado 
Ruby precisa desesperadamente de um modo simples p ermite qu e duas partes 
de armazenar e acessar os diversos pares de informação 
(data + texto). Certamente, parece muito para o que os 


e dados de blog sejam 
objetos JavaScript têm a oferecer... combinar diversas d dad 3 d l Ê á 
partes de informação em uma única entidade. combinadas em uma 


única entidade. 
Data do blog + Corpo do blog = Objeto do blog 
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Os objetos personalizados estendem o JavaScript ; |. 12 


A linguagem JavaScript inclui muitos objetos padrão úteis, vários dos quais sa realmente 44e f, / 
exploraremos posteriormente neste capítulo. Por mais úteis que esses JARN 
objetos possam ser, há vezes em que eles simplesmente não são suficientes. 

O blog YouCube é um bom exemplo desse limite, uma vez que envolve 

um problema de armazenamento de dados que não pode ser resolvido 

com os tipos de dados JavaScript predefinidos... um objeto personalizado é string 


necessário. 


Data do blog. Ena 


08/19/2002 
Blog Um objeto 08/16/2008 
Personalizada 


“penas para o 
à 405 GovCuhel 


es Sem a ajuda dos diets) 
+emtador 


ja ser 
poderia s 
armazenar as entradas 


do blog em um array A 


08/21/2008 


Corpo do blog, 


Os objetos personalizados permitem adicionar recursos ao JavaScript 
que servem às suas próprias necessidades específicas. No caso de 

O objeto Blog serve como Ruby, um objeto personalizado poderia modelar uma entrada do 

um Fipo de dados composto blog, usando as propriedades para representar uma data e o texto 
do corpo do blog. E mais, os métodos podem ser usados para 
adicionar um comportamento às entradas do blog, tornando mais 
simples criá-las e gerenciá-las. 


— combinando as duas 
partes dos dados em uma, 


Para dar vida a tal objeto personalizado, porém, primeiro temos que 
descobrir como os objetos personalizados são criados... 
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cuidado: área de construção 


Construa seus próprios objetos personalizados 


Um construtor é 
Como os objetos têm dados associados que devem ser inicializados 
quando um objeto é criado, um método especial chamado construtor responsável por 
é requerido para fazer com que o objeto comece a funcionar. 
Todo objeto personalizado requer seu próprio construtor, que é criar um obĵeto. 
denominado como o objeto. O construtor é chamado para inicializar 
um objeto na criação. Ao criar um objeto personalizado, será sua 
função escrever um construtor adequado que dê vida 20 objeto. 


eos 
piedades 
5 Prop m eniados: 


var who; 
var what; function display() ( 


} 


what, when, where); 


var when; 


Invitation(who, 
RO O nome do construtor 
coincide com o nome do 
a objeto, 
7 
O objeto recém-criado está 


promo para o yso, Convite 


var where;) function deliver() | 


} 


As Propriedades 
Sho inicializadas, 


Propriedades 


var who = “Somebody”; 


who = “Somebody”; 


var what = “Something”; function display () 


what = “Something”; var when = “Sometime”; 


} 


when = “Sometime”; var where = “Somewhere”; 


where = “Somewhere”; function deliver() į 


} 


Para criar um objeto com um construtor, você usará o operador new, que 
inicia o processo de criação do objeto chamando o construtor do objeto. 
A parte do construtor para criar um objeto parece uma chamada para um 
método porque é realmente isso. Contudo, é importante usar sempre o 
operador new para iniciar a criação de um objeto, em oposição a simplesmente 
chamar o construtor de um objeto diretamente. 

O operador new êusado para criar um 


4 nova objeto, 


var invitation = Ei] Invitation (“Somebody”, “Something”, “Sometime”, “Somewhere”) ; 


to novo objeto é ÑN o construtor é Às propriedades são 
armazenado em chamado exatamente definidas transmitindo 
uma variavel. como um metodo. argumentos para o 
construtor. 
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O que existe em um construtor? 


Grande parte do serviço do construtor é estabelecer as propriedades de um objeto, 
junto com seus valores iniciais. Para criar uma propriedade em um construtor, 
você definirá a propriedade usando uma palavra-chave JavaScript chamada this. A 
palavra-chave this atribui a posse da propriedade ao objeto e também define seu 
valor inicial ao mesmo tempo. A palavra faz, literalmente, o que indica — você está 
criando uma propriedade que pertence a “este” (this) objeto, em oposição a ser 
apenas uma variável local dentro do construtor. 
Os construtores 


Hêm sempre uma 
A palavra-chave his letra maiúscula inicial, 
uma propriedade do s + ad objeto. 


4 
objeto de uma variavel 
Karan this.what = what; 
E ee ERES vnen - when: Os argumentos da 
construtor são 
ZOIN 
atribuidos às novas 
4 
O construtor é propriedades. 
reunido, ia qualquer 
outra Junção, 


As propriedades do objeto são criadas e inicializadas em À palavra-chave this é 


um construtor usando a notação do objeto (o operador 

ponto) e a palavra-chave this. Sem a palavra-chave a chave para criar as 
this, o construtor não saberia que você está criando 

propriedades do objeto. O resultado desse construtor é a propriedades do objeto 
criação de quatro propriedades, que recebem os quatros 

valores transmitidos como argumentos para o construtor. dentro de um construtor. 


aiport seu Lápis 


Escreva um construtor para um objeto Blog que cria e 
inicializa as propriedades para a data e o texto do corpo de uma 
entrada do blog. 


this.who = who; 


this.where = where; 
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faça funcionar 


eogporto seu Lápis 
N Solução Escreva um construtor para um objeto Blog que cria e inicializa as 


propriedades para a data € o texto do corpo de uma entrada do blog, 


O construtor é nomeado O texto do corpo ea 


coma o objeto, a E pqp data são 


Pass 
function Blog (body, date) { nsmitidos 


As propriedades São inicialigadas 
usando os argumentos do construtor. 


À palavra-chave +his refere- 
seas propriedades do objeto, 


Como dar vida aos objetos do blog 


O objeto Blog, certamente, está tomando forma, 
mas não foi realmente criado ainda. Por melhor Entrada do bla. 7 
que possa parecer na teoria, ele ainda é apenas 

uma hipótese a ser provada. Lembre-se de que o 
construtor estabelece a construção de um objeto, mas 
nada é criado fisicamente até que você use o operador 
new, que, então, constrói o objeto chamando o 
construtor. Portanto, continuemos e criemos um 


objeto Ái real, 


4 
Acompanhe os exemplos, dispomyeis para o 
download em www altabooks com br. 


gt 
escrita à mão, 


var blogEntry = new BIS cot the new cube I ordered...”, “08/14/2008"); 


objeto Blog do Blog 
JeyaSeript. à æ 


function Blog (body. date) ( 


O construtor 
Blogt ) é chamado 
para criar a objeto, 


O objeto 
É 
e criado, 
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P: Estou confuso com 

a criação do objeto. O 
operador new cria um objeto 
ou o construtor? 


R: Ambos! O operador new é 
responsável por colocar a criação 
do objeto em movimento e grande 
parte de seu trabalho é assegurar 
que o construtor seja chamado. 
Simplesmente chamar um construtor 
como uma função sem usar o 
operador new não criaria um 

objeto e usar o operador new sem 
construtor não faria sentido. 


P: Todo objeto 
personalizado requer um 
construtor? 


R: Sim. O motivo é que o 
construtor é responsável por criar 
as propriedades do objeto, portanto, 
sem um construtor você não teria 
nenhuma propriedade. E sem 


now 
+ bored andshoi 


Aponte seu Lápis 
A p p 
=" 


Não existem 
Perguntas idiotas 


nenhuma propriedade, não teria um 
objeto muito significativo. 

Há uma exceção para esta regra 
sobre os construtores e ela se 
aplica ao criar um objeto puramente 
organizacional consistindo em uma 
coleção de métodos que não atuam 
nas propriedades do objeto. Neste 
caso, é tecnicamente possível 
fazer sem um construtor. Mas 
lembre-se de que tal objeto não é 
exatamente um exemplo brilhante 
de boas práticas de programação 
orientada a objetos porque é, na 
verdade, apenas uma coleção 

de funções afins. Ainda assim, o 
próprio JavaScript utiliza um objeto 
organizacional para agrupar as 
tarefas relacionadas à matemática, 
como você aprenderá posteriormente 
no capítulo. 


P: O que é exatamente 
this? 


Crie um array de objetos Blog em uma variável 
denominada blog que é inicializada nas entradas do blog 
no blog YouCube. Sinta-se à vontade para escrever apenas 
as primeiras palavras de texto do corpo em cada entrada. 


como dar vida aos dados 


R: this é uma palavra-chave 
JavaScript usada para se referir a um 
objeto. Mais especificamente, thi s 
refere-se a um objeto de dentro 
desse mesmo objeto. Sim, isso 
parece muito estranho e um pouco 
esquizofrênico. Mas faz sentido, mais 
uma vez, envolver seu cérebro nisso. 
Para ver em termos reais, considere 
o que aconteceria se você perdesse 
seu relógio e alguém o encontrasse 
em um lugar cheio de pessoas. 
Quando essa pessoa levantasse o 
relógio, provavelmente você gritaria: 
“É meu relógio!”, Você usou a palavra 
“meu” para se referir a si próprio. O 
mais importante, a palavra “meu” é 
usada para esclarecer que você é 

o dono do relógio. this funciona 
exatamente do mesmo modo — 
implica na propriedade do objeto. 
Portanto, this. date significa 
que a propriedade da te pertence 
ao objeto no qual o código aparece. 
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solução inteligente 


et 
Aponte seu Lápis 
Solução Crie um array de objetos Blog em uma variável denominada 

blog que é inicializada nas entradas do blog no blog YouCube. 
Sinta-se à vontade para escrever apenas as primeiras palavras de 
texto do corpo em cada entrada. 


O osruiaoos 


Gotthe new cube orderedirs areal 


var blog = 


new Blog("Got the new cube I ordered...”,"08/14/2008"), 


Cada redimir do » bog e criada como um EE 


E com seu propria texto do corpo e data. 
tr À prop P: 


YouCube 1.0 


Combinar o array de objetos Blog com algum código JavaScript para exibir 
os dados do blog produzirá uma versão inicial do YouCube. Ruby sabe que seu 
trabalho não está terminado, mas o blog está começando a funcionar e ela está 
contente com os primeiros resultados. 


Gosto do modo como o objeto 
Blog combina a data e o texto 
do corpo do blog no YouCube. 


Os dados armazenados em 
cada objeto Biog são bem 
exibidos na pagina GouCube, 


PT Veio Ti E 


Yostube- Ts Bog da Cabe Jea 
8142008 


shopping for a new onè. 
e nei e 


save A toiling over the new cube. Gotia nap- 
Vejamos o código requerido para dar vida online. Yikes! That one could be a beast. 
aos objetos Blog e tornar o YouCube 1.0 
uma realidade... 
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Found a 7x7x7 cube for sale 


como dar vida aos dados 
<html> 


Um foco no yoi ONS 


<title>YouCube - The Blog for Cube Puzzlers</title> 


<script type="”text/javascript”> 
// © construtor do objeto Blog 
function Blog(body, date) ( O construtor Blog ) cria 
// Atribua as propriedades 


this.body = body; Psp dvas propriedades do blog, 


Adonis this.date = date; 
} 


O array de objetos Blog, 
show! logO py O array global das entradas do blog I A s 


desenha as “ar blog = | new Blogi“Got the new cube I ordered..”, “08/14/2008”}, 

new Blog (“Solved the new cube but of course...”, “08/19/2008”), 
emtradas new Blog (“Managed to get a headache toiling...”, “08/16/2008"). 
new Blog("Found a 7x7x7 cube for sale online...”, “08/21/2008”) 


de entradas do blog 
para o diV unctidh showBlog (numEntries) { 
blog né ¿jfħjuste o número de entradas para mostrar o blog completo, se necessário 


(InumEntries) ÇA chi, 
página, mumenteles = Diog ido et Je o númera de entradas do blog a exibir 
rss tas onvsadas as inios: não foi transmitido como um argumento, 


var i = 0, blogText = "2; mostre todas as entradas. 
while (i < blog. length 65 i < numEntries) ( 
JÍ Use um segundo plano cinza para uma entrada sim outra não do blog 
2€ (132 0 
blogText += “<p style="background-color: fEBEEES'>”; 
liege 
blogText += “<p>”; Arterne a cor do segundo plano das ertradas do 
// Gere o código HTML formatado do blog Sleg para gue sejam mais faceis de ler, 
blogText += “<strong>” + blog[i].date + "</strong><br />% + blogli] body + "</p>"; 


itt: 


4 
) Defina o codigo 
4/ Defina o código HTML do blog na E T S formatado de 


document .getElementById (“blog”) .innerHTML = blogText; 


; entrada do blog 


</script> 
</head> para o div blog, 


<body onload="showBlog (5);"> r > z f 
<h3>YouCube - The Blog for Cube Puzzlers</h3> O div $log, que inicia vazio, mas € preenchido 


< c=” cube] ” alt="YouCube” /> 
ORAE puedes Toi mi com os dados formatados do blog, 
<input type="button” idoshowalı" value="Show ALI Blog Entries” onclick=“showBlog{ );” /> 
</body> 
</htm> Mostre todas ÃO 
as embradas do 
blog quando o 


botão for clicado, 
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por que, por que, por que 


P: Por que o botão Show All 
Blog Entries é necessário 
em seu YouCube? 


JR: No estado atual do blog, o botão 
não é necessário, uma vez que há 
apenas quatro entradas do blog no 
total. Mas quando o blog crescer, 
será cada vez mais importante limitar 
o número de entradas mostradas 
inicialmente na página YouCube 
principal para evitar um excesso de 
visitantes. Portanto, o código do blog 
tem como padrão mostrar apenas 

as cinco primeiras entradas. O botão 
Show All Blog Entries (Exibir Todas as 
Entradas do Blog) anula esse padrão 
exibindo todas as entradas do blog. 


Não existem 
Perguntas idiotas 


P: Por que innerHTML 

é usada para mostrar as 
entradas do blog, ao invés 
dos métodos DOM? 


R: Embora os métodos DOM 
sejam certamente preferidos em 
termos de compatibilidade com os 
padrões Web, eles são bem dificeis 
ao gerar dinamicamente o código 
HTML altamente formatado. A razão 
é que cada tag contêiner, como <p> 
e <strong>, tem que ser criada 
como um pai para os nós-filhos de 
seu conteúdo. innerHTML é uma 
grande conveniência neste caso e 
simplifica muito o código YouCube. 


Um blog desordenado 


O YouCube 1.0 parece bom, mas tem falhas. Ruby notou que as 
entradas do blog estão na ordem errada — na verdade, elas devem 
aparecer com o envio mais recente primeiro. No momento, são 
exibidas na ordem em que são armazenadas, que não podemos 
contar como sendo cronológica. 


“Acabei de perceber que nem 
sempre escrevo as entradas 
do blog na ordem cronológica... 
isso é um problema! 


Se. 
'ouCube - The Bi 


í Eo > 
Os usuários ass 


esperam que a 
embrada do blog 
mais superior seja 
a mais recente. 

LN Es 


A 


Show 
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TouCube - The Bog for Cub Puzziers 
log for Cube Puzzlers a = 


P: Por que o objeto Blog 
não tem nenhum método? 


R: ambição, isso é bom! A verdade 
é que há muitos outros aspectos 
do YouCube para trabalhar antes 
dos métodos B1og tomarem-se 
uma prioridade de fato. Mas não 
se preocupe, os métodos são 
definitivamente uma parte do plano 
de longo alcance para o YouCube. 
Os métodos são uma parte 
importante de qualquer objeto bem 
construido e o objeto EL og não é 
diferente. 


À ordem das 
entradas do blog 
deve ser a mais. 


El el 


Got the new cube orders. Ts a rel pear! 


Found a 7x7x7 cube for sale 
a ube for sale online. Yikes! That one 
— Could be a beast 


como dar vida aos dados 


A necessidade da classificação 


A solução de Ruby para o problema da ordem do blog é 
classificar o array do blog pela data. Como o JavaScript suporta 
o loop e as comparações, deve ser possível fazer um loop nas 
entradas do blog, comparar as datas entre si e classificá-las na 
ordem cronológica inversa (os envios mais recentes primeiro). 


Togue estas dvas entradas 
do bie 

la blog, yma vez gue a 
segunda è a mais recente. 


Blog 


Esta ertrada do 
blag deve aparecer 
Em primeiro lugar, 
uma ves gue ea 
mais recente, 


Faça um loop 
no array do blog. 


[2) Compare a data de cada objeto 
Blog com o seguinte. 


(3) Se a próxima entrada do blog for mais recente do 
que a entrada atual, troque-as. 


Esta solução de classificação do blog tem algum 
mérito e parece que pode funcionar, supondo 
que podemos planejar os detalhes de 

comparar as datas do blog. 


Espere um minuto! Se as datas 
forem armazenadas como strings, 
como se pode compará-las para 

saber qual é a mais recente? 


Uma data armazenada em uma string não é 


realmente uma data. 


A estratégia de classificação do blog de Ruby teve dificuldades inesperadas 
devido ao fato de que uma data armazenada como uma string não tem 
nenhum conceito de tempo. Em outras palavras, não há nenhuma maneira 
de comparar as strings “08/14/2008” com “08/19/2008” para 
saber qual é a mais recente porque são apenas strings. Embora seja 
possível comparar as strings, tais comparações não compreendem o 
formato específico de uma data e, portanto, não são capazes de comparar 
os componentes do mês, dia e ano de uma data ao executar a comparação. 


Portanto, antes de podermos pensar seriamente sobre como classificar as 
entradas do blog pela data, primeiro, precisamos repensar no modo como 
as datas são armazenadas no blog, 
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você viu minha data 


Um objeto JavaScript para a data 


O que Ruby precisa é da capacidade de armazenar uma data de 

modo que possa ser comparada com outras datas. Em outras 

palavras, a data precisa compreender que é uma data e comportar- 

se de acordo. Espere um minuto, parece muito com um objeto! E A data da primeira 
como resultado, o JavaScript oferece um objeto Date predefinido emtrada do blog, 
que poderia ser muito bem ser o que o Ruby precisa. ] 


Data 


Os métodos 


/ 
Os métodos gre obtêm 
que definem os os dados da 
dados da data, PER 

a a 


getFullYear () 


O objeto Date representa um momento específico no tempo, 


O objeto Date 


o 

predefinido em milissegundos, e é uma parte padrão do JavaScript. Embora 
o objeto Date certamente use propriedades internamente, 

representa um elas são invisíveis para você, o usuário do objeto. Você trabalha 


o © com o objeto Date puramente através de seus métodos. 
E Parecido com o objeto Blog, você cria um objeto Date 
usando o operador new. Eis um exemplo de como criar um 
Arma ene à objeto Date objeto Date que representa a data e hora atuais: 
3 y j que repr 


recém-criado em uma variável, 
var now = new Date(); 
Éste nova obj eta 
Crie um objeto Date usando o Date Bii a 
operador new, data/hora atuais. 
o 
Dentro do objeto Date, Este objeto Date é criado e inicializado com a data ca 


” hora atuais. Note que a sintaxe para criar um objeto Date 
a hora e expressa em é muito parecida com chamar uma função ou método e é 


x por isso que você realmente está chamando o construtor do 
milissegundos. objeto Date. Você pode transmitir ao construtor Date ( 
4 JA ) um argumento de string para especificar uma data 
À data é transmitida ao diferente da atual. Por exemplo, este objeto Date representa 


construtor coma uma string a data da primeira entrada do blog YouCube: 


de texto, 
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como dar vida aos dados 


Como calcular a hora 


Um dos recursos mais importantes dos objetos é como eles sabem, inerentemente, 
manipular a si mesmos. Por exemplo, considere o quanto capcioso seria calcular o 
número de dias entre duas datas por si mesmo. Você teria que converter de algum 
modo a data em um número de dias a partir de alguma referência conhecida, 
assegurando que iria decompor os anos bissextos. Ou poderia simplesmente 
deixar o objeto Data fazer o trabalho para você... verifique esta função que faz o 
levantamento pesado com alguns objetos Date: 


PR E) Converta de milissegundos 
unção acfa dois abjeros em segundos, em minutos, em 
Date como argumentos. horas, em dias. Caramba! 


function getDaysBetween (datel, date2) ( Re 


var daysBetween - [BHEBMENANESM] / (1000 + 60 + 60 + 24); 


return Math. round (daysBetween) ; 


MST y maS per , 

estee s codiço que fa 

Arredonde o resultado e retorne-a... roundi ) é q Es ô; 3 
7 Lodo o Lrabalho! 

um método do objeto Math, com o qual lidaremos 

emum caprtvlo posterior, 


Esta função mostra o poder do objeto Date em uma simples 

parte do código — uma subtração. Toda a complexidade associada 

ao cálculo da diferença entre as duas datas está convenientemente 
colocada dentro do objeto Date. Nossa única preocupação é o 
resultado da subtração, que é o número de milissegundos entre as 
duas datas. Converta os milissegundos em dias, arredonde o resultado 
e teremos uma pequena função útil que pode ser reutilizada sempre 
que precisarmos saber a diferença entre as duas datas. 


getDaysBetween (datal, da ta2); 


Crie dois objetos Date para as duas primeiras entradas do blog YouCube. 
cio Então, chame a função getDaysBetween ( ), transmitindo os dois 
Exercicio  crjetos Date e exibindo o resultado em uma caixa de alerta. 
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solução do exercício 


Crie dois objetos Date para as duas primeiras entradas do blog 
YouCube. Então, chame a função getDaysBetween( ), 
Solução do transmitindo os dois objetos Date e exibindo o resultado em uma 
Exercicio caixa de alerta. 
Crie objetos Date para as 
duas datas de embrada do 


A função retorna a diferença. 


The dates are separated by 5 days. 


Transmita os dois objetos Date 
como argumentos para a função, 


Como repensar as datas do blog 


Embora seja ótimo que o JavaScript ofereça um objeto Date que torna possível 
manipular as datas de modo inteligente, o objeto BLog do YouCube atualmente 
ainda armazena as datas como strings, não como objetos Date. Para aproveitar 
os recursos disponibilizados pelo objeto Date, precisamos mudar o blog para que 
suas datas sejam objetos Date. 


Blog 


À propriedade date da 
objeto Blog precisa ser 
convertida de uma string 
em vm objeto Date. 


A pergunta é: a propriedade date do objeto Blog pode armazenar um objeto 
Date ao invés de uma string? 
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Um objeto em um objeto 


O objeto Blog é um bom exemplo de como os objetos devem conter, com 

frequência, outros objetos. As duas propriedades do objeto Blog já são, na 

verdade, objetos em si — ambas as propriedades são objetos String. Os objetos 

String realmente não se parecem objetos porque são criados como literais do A titeral de 
objeto simplesmente colocando aspas em uma string de texto. Os objetos Date string cria 

não são tão flexíveis e devem ser criados usando o operador new. automaticamente 


Para criar uma propriedade date do blog como um objeto Date, temos que usar o vm objeto String. 
operador new para criar uma nova Date ao criar o objeto Blog. Se isso parecer 
aterrorizante, talvez algum código diminua 


o pego. 
[3] siede Bios é criado usando o D 


var blogEntry = new Blog (“Nothing going on but the weather.”, 
Remate 10/31/2008); o objeto Date é criada € +ransmibido para o 
r 


io Es construtor Blogt 3, também usando o operador new. 


O código mostra como uma entrada do blog YouCube é, agora, 0) op erador new cria 


criada como um objeto que contém dois outros objetos (um 


objeto String e um objeto Date). Naturalmente, ainda obs Os CO) o 
precisamos construir um array de objetos Blog para representar cs J etos com à ajuda 
com sucesso todas as entradas do blog YouCube. de construtores. 


propriedade do corpo, 
Data 


propriedade da data. 


Aponte seu Lápis 
Reescreva o código para criar um array de objetos Blog do 


YouCube onde cada data é agora um objeto Date. Sinta-se à 
vontade para encurtar o texto do corpo. 


você esta aqui» 413 


solução inteligente 


Aponte seu Lápis 
a Solução Reescreva o código para criar um array de objetos Blog do 


YouCube onde cada data é agora um objeto Date. Sinta-se à 
vontade para encurtar O texto do corpo. 


Cada embrada do sy éainda 
o Blog. % 


criada como um ahji 


As literais de string funcionam bem a 
o texto do corpo de cada emtrada do blog, 


(CA data para cada objeto Biog € 
criada como um sets Date. 


Não existem 
Perguntas Ídiotas 


P: Por que a data em um objeto Date é 
armazenada em milissegundos? 


R: A principio, saiba que o objeto Date representa 

um instante no tempo. Se pudesse clicar o botão Pause 
(Pausa) no universo, teria um momento congelado no 
tempo. Mas não teria nenhum modo de dizer às pessoas 
quando o momento ocorreu sem algum tipo de referência. 
Portanto, você decide sobre 1º de janeiro de 1970 como 
sendo o ponto de referência arbitrário para seu momento 
no tempo. Agora, você precisa de uma medida a partir 
deste deslocamento. Talvez seja 38 anos, 8 meses, 14 
dias, 3 horas. 29 minutos e 11 segundos. Mas é um modo 
complicado de controlar um deslocamento do tempo. É 
muito mais fácil ficar com uma única unidade de medida, 


Qy Pontos de Bata 


= Os objetos Date JavaScript padrões 
representam um instante no tempo, 
expressado em milissegundos. 


= Oobjeto Date inclui vários métodos 
para acessar os diferentes fragmentos e 
partes de uma data e uma hora. 
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uma que seja capaz de representar as menores frações 
de tempo. Que tal milissegundo? Portanto, ao invés de 
todas aquelas unidades diferentes de tempo, agora terá 
1.218.702.551.000 milissegundos. Sim, é o grupo inteiro 
de milissegundos, mas os números grandes não são um 
problema para o JavaScript. 


P- Tenho que me preocupar em converter os 
milissegundos ao usar o objeto Date? 


R: Depende. O objeto Date inclui vários métodos para 
extrair as partes significativas de uma data que evitam lidar 
diretamente com os milissegundos. Porém, se você precisar 
lidar com uma diferença entre duas datas, então os 
milissegundos quase certamente servirão. 


= O objeto Date é inteligente o bastante 
para saber como manipular as datas 
matematicamente, assim como comparar as 
datas entre si. 

= Como a maioria dos objetos diferentes de 

String, você cria um objeto Date usando 

o operador new. 
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As datas não são úteis... para os humanos 


Com a propriedade da data do objeto Blog convertida em um objeto Date, Ruby 
está pronta para voltar sua atenção para classificar as entradas do blog pela data. 
Bem, quase pronta. Parece que ela introduziu um novo problema, no sentido de 
que as datas das entradas do blog, agora, são extremamente obscuras. Ruby espera 
que os usuários realmente não se importem com o fuso horário de cada envio e ele 
apenas confundirá a experiência YouCube. Claramente, a introdução dos objetos 
Date no YouCube precisa ser examinada mais atentamente! 


Ás datas do blog 
estão bem bagunçadas... 
as informações 


eoe YouCube - The Blog for Cube Puzzlers | =. 
YouCube - The Blog for Cube Puzzlers 


sobrecarregams 


14 2008 00:00:00 GMT-0500 (CDT) 
Cie Hey cube T ordered. és a real pearl. 


2008 00:00:00 GMT -0500 (CDT) 
Diet de cem cube but of course, now I'm bored and shopping for a new one. 


00:00:00 GMT-0500 (CDT) 
e e a headache toiling over the new cube. Gona nap. 


21 2008 00:00:00 GMT -0500 (CDT) 
Het a cube for sale online. Yikes! That one could be a beast. 


N 
Show All Blog Entri 


A mudança do objeto Date faz 
sentido na hora, mas agora, 
as datas do blog parecem 
horríveis. Nem consigo tembrar 
como escrever o código para 
formatar as datas. 


Não sê as datas parecem ruins A 
como também as embradas do 
blog ainda aparecem na ordem 
errada... vghl 


Ruby está um pouco confusa sobre as datas 
obscuras do YouCube porque ela não se 
lembra como escrever nenhum código para 
exibi-las. Tudo que ela fez foi converter as 
strings da data nos objetos Date. As forças 


malignas do JavaScript estão conspirando para 
tornar suas datas feias? 
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tem que haver uma maneira melhor 


Como converter os objetos em texto 


Felizmente, não há nenhuma força maligna para responsabilizar pelas datas 
YouCube feias. Na verdade, são as forças muito naturais dos objetos JavaScript 
que são responsáveis pela formatação da data — as datas formatam a si mesmas! 
Funciona assim: todo objeto JavaScript tem um método chamado toString () 
que tenta fornecer uma representação de texto do objeto. A data obscura é a saída 
do método toString () padrão do objeto Date. 


var blogDate = new Date ("08/14/2008") ; Thu Aug 14 2008 00:00:00 GMT-0500 (COT) 


alert (blogDate.toStringt)); 


À parte esperta do método toString ( ) é que ele entra 


em cena automaticamente quando um objeto é usado em um O método Lo String 3 
contexto onde uma string é esperada. Por exemplo, o código de mastak Con sithi 
alerta da data do blog poderia ser reescrito assim, e resultar na D 4 

late tambem combroia 


mesma saída exata: 


alert (blogDate) ; 


e 


A tunção alert) espera 
uma string, portanto 

o método Lo String) é 
chamado internamente O método oStringo) é 


para fornecer uma bem Util ao fornecer uma 

representação de string representação de strin 

do objeto Date. de uma data, mas Fambem 
aparece em outros objetos 
+ambém, 


O método 
Como a função alert () espera uma string, o objeto Date é esperto 
9 j 
toSting0 o bastante para saber que deve fornecer uma representa de string de si 
mesmo. Portanto, ele chama o método toString () para lidar com a 
tarefa. 


fornece uma 
representação 


Este negócio toString () não seria um problema, exceto pelo fato 


de strin g de de que o YouCube realmente precisa que as datas sejam exibidas em um 
formato fácil de ler como, por exemplo, MM/DD/AAAA. No final, não 
um objeto. parece que o YouCube será capaz de aproveitar a representação de string 


padrão do objeto Date disponibilizada por seu método toString (). 
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Como acessar as peças e as partes de uma data 


Ruby precisa de um modo de personalizar o formato de uma data. À chave 
para personalizar a formatação de um objeto Date é acessar as partes 
individuais da data como, por exemplo, o mês, dia e ano. Então, leremos a 

, por exemplo, > Ê » pode O mês da data 
remontar uma data em qualquer formato desejado. Felizmente, o objeto 4 

a E E como um numero 
Date fornece métodos para acessar essas partes de informação. 
ertre O elf, 


9 sad O dia do mês 
7 


coma Um numero 


ERRA 


epos O ano com Jd 


digitos. 


O objeto Date, de fato, suporta muito n ex 

mais métodos diferentes destes três, Preste muita atenção 
fornecendo todos os tipos de maneiras e ad nos valores retornados 
diferentes de acessar a data e a hora de um a z 

objeto Date. Porém, esses três métodos Preste atenção! pelos métodos Date. 
eas o ia È O método getMonth( ) retorna um mês como um 

dana dalog emi forai i número entre O (janeiro) e 11 (dezembro), ao passo que : 


getDate( ) retorna o dia do mês na faixa de 1 a 31. 


Aponte seu Lápis 
Corrija o problema obscuro da data do blog YouCube 


reescrevendo o código que formata uma entrada do blog e 
armazena-a na variável blogText. Certifique-se de que a data 
do blog esteja formatada como MM/DD/ AAAA. Eis a versão 


original do código: 


blogText += “<strong>” + blog[i].date + “</strong><br />” + bloglil.body + “</p>”; 
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solução inteligente 


gre seu Lápis 


Corrija o problema obscuro da data do blog YouCube 
reescrevendo o código que formata uma entrada do blog e 

armazena-a na variável bDlogText. Certifique-se de que a data 
do blog esteja formatada como MM/DD/ AAAA. Eis a versão 


original do código: 


blogText += “<strong>” + blog[i].date + “</strong><br />” + blog[i].body + “</p>”; 


ad blog[i] date .getFul. 


Conseguimos 


mais controle blogfil .body + 


~ “</p>; 
IE T o aa a a e 7 
com a objeto Cada parte da data é A data do blog exibida, 
Date para extraida do objeto Date agora, esta construida 
formatar a chamando os métodos, de moda personalizado 


E no formato uufi IA 
Si mesma, AAAA. 


As datas facilitam a classificação 


Agora que as datas do blog foram convertidas com sucesso Data 

em objetos Date, que são muito mais adequados para 

classificar do que as strings, é hora de rever a ordem do Data 
blog. O problema é que as entradas do blog são exibidas 

atualmente na mesma ordem em que são armazenadas no < 

array blog, que não é necessariamente cronológica. A 

maioria dos blogs é exibida na ordem cronológica inversa, N 

onde os envios mais recentes aparecem primeiro na lista de 

entradas do blog. Sabendo isso, é possível rever a estratégia 

de classificação do blog original: 


Agora, Hemos os objetos Date gee 
O Faça um loop no array do blog, e ado podem ser comparados embre si, 


(2) Compare o objeto Date em cada objeto Blog com o seguinte. 


[3] Se a data da próxima entrada do blog for mais recente que a entrada atual, troque as entradas. 


Embora a parte de comparação das datas desta estratégia certamente pareça muito 
menos assustadora com a ajuda do objeto Date, o resto do plano ainda envolve 
uma boa quantidade de codificação personalizada. Classificar uma sequência de 
datas certamente parece um problema de programação comum que foi resolvido 
muitas vezes antes. Você odeia fazer sempre a mesma coisa... 
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Não seria um sonho se o JavaScript 
tivesse algum tipo de recurso de 
classificação predefinido que acabasse 
com o trabalho pesado de classificação 
de uma sequência dos dados? 
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classifique entre si mesmo 


Arrays como objetos 


Pode ser que um array seja capaz de classificar a si mesmo? Se 
uma data souber como se transformar em uma string. não será 
tão difícil pensar que um array poderia ser capaz de se classificar. 
Para que isso seja possível, porém, um array teria que ser um 
objeto para que a classificação pudesse ocorrer em um método. 
E, na verdade, é. Lembra deste código do script Mandango? 


i++) í 


=. FAN 
A hos length E uma propriedade do 
À variável seats é um array, objeta do array que informa como 


muitos elementos estão no array, 


Portanto, o segredo está revelado, os arrays são objetos, mas isso significa que eles 

podem classificar a si mesmos? Não só os arrays têm propriedades, como length, 

como também têm métodos que atuam nos dados do array, dando-lhes vida. E sim, 

há um método denominado sort () que classifica os dados em um array. Vejamos 

como funciona: eA 


nums 


4 
Um array de numeros, 


Es 


var nums = [ 51, 11, 34, 29, 17, 46, 22, 58, 16 ]; 


N Classifica o array na ordem [sort | 


7 
numerica crescente, 


O método sort () muda a ordem dos elementos dentro do array. O 
comportamento de classificação padrão é na ordem crescente, portanto o array 
nums transforma-se nisto: 
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Classificação personalizada de um array 


O comportamento padrão do método sort () do objeto Array geralmente 
não é suficiente. A novidade é que o comportamento de classificação é 
determinado por uma função de comparação que sort () chama para 
lidar com a comparação de cada item classificado em um array. Você pode 
ajustar a ordem de classificação fornecendo sua própria versão dessa função de 
comparação. Eis um exemplo de como é, geralmente, a função: 


Os dois argumentos são dois 


ARE itens do array que estão sendo 


function compare(x, y) i eae 
j E comparados para a classificação. 
return x - 


| am O valor de retorno determina se 
x ey ficam onde estão no array ou 


Ea 
sepe classificado na Frente de x, 


O valor de retorno da função 
compare () é um número que <0 
determina a ordem de classificação Classifica x na frente de y. 


resultante de x em comparação a y. 


0 
Não classifica — deixa 
x e y como estão. 
>0 
Classifica y na 
frente de x. 


Sua função compare () personalizada é introduzida na equação de classificação 
do array quando você chama o método sort () — simplesmente transmita uma 
referência para a função compare () para o método. 


1 
À classificação do arras, agora, € 


nums. sort -e km controlada pela função comparel ) 
EA personalizada, 
e iponte seu Lápis 


Escreva o código para uma função de comparação personalizada 
denominada compare ( ) que classifica as entradas do array 
do blog YouCube na ordem cronológica inversa (a mais recente 
primeiro). Sugestão: Os objetos Blog podem ser subtraídos uns 
dos outros simplesmente usando um sinal de menos. 
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solução inteligente 


cet 
ponte seu Lápis 
Escreva o código para uma função de comparação personalizada 


Solução denominada compare ( ) que classifica as entradas do array 
q y 
do blog YouCube na ordem cronológica inversa (a mais recente 
B 5a K 
imeiro). stão: j log podem ser subtraídos uns 
£ z primeiro). Sugestão: Os objetos B. 
stes dois dos outros simplesmente usando um sinal de menos. 


uma ves gee o 
arrai contém 
objetos Blog, 


Éstamos subtraindo 
as duas datas 

coma números 
(milissegundos). 


Subtrair a primeira data da segunda resulta 
f 1 
em uma classificação cronologica invertida, 


A classificação ficou simples com as literais da função 


Quando você pensa sobre o papel da função de comparação de classificação do 
array, ela é realmente apenas usada pelo método sort () e nada mais. Como 
nunca é chamada por nenhum código de script YouCube, de fato não há nenhum 
motivo para ser uma função nomeada. 


Ainda se lembra das literais da função do termostato no Capítulo 6? A função 
compare ( ) é uma excelente candidata para uma literal da função por causa 
do modo como é usada. Na verdade, a classificação do blog YouCube pode ser 
simplificada convertendo a função compare ( ) em uma literal da função que é 
transmitida diretamente para o método sort ( ). 


E” 

ata O e pd 

blog. sort (function (blogl, blog2) { transmitida diretamente para 
H 


re blog2.date - blogl.dare; í 
E sa qui s, o metodo sor K ) do array, 


H? 


Como devota dos quebra-cabeças, Ruby é eficiente. E, neste caso, isso se 

equipara a eliminar uma função nomeada desnecessária que é, realmente, 

apenas uma assistente do método sort ( ). Ruby é tão inclinada à 

eficiência que ela não vê por que a função de comparação precisa ocupar A Irferal da função é 
três linhas de código. Embora a organização do código JavaScript não reduzida a uma Unica 
faça o código ser executado de modo diferente, neste caso a literal da linha de codiso. 

função é simples o bastante para fazer sentido diminuí-la para uma única 


linha de código. 
bios sort (funerton plog; bIOg2) | retuen blogtidate = biogl;dates 1: 
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P: Todo objeto tem um 
método toString( )? 


R: Sim. Mesmo que você crie um 
objeto personalizado e não lhe fomeça 
um método toString( ),0 
JavaScript informará, pelo menos, que 
é um objeto, caso você utilize-o em um 
contexto onde uma string é esperada. 
Certamente, a string não será muito 
significativa, mas caberá a você 
fomecer um método toString ( 

) para os objetos personalizados se 
quiser que ele transmita um significado 
sobre o objeto. 


Não existem 
Perguntas idiotas 


P: Como a comparação da 
classificação funciona entre 
os objetos Date? 


R: 0 objetivo de uma função de 
comparação de classificação é retornar 
um número cujo valor controle a 
classificação dos dois argumentos. 

No da comparação das datas, 
você deseja que a data mais recente 
seja classificada primeiramente. A data 
mais recente é a data maior, portanto 
subtrair a segunda data da primeira 
terá o resultado de classificar as datas 
recentes na frente das posteriores. 
Isso significa que a segunda data 

será classificada acima da primeira 
apenas se a segunda data for maior (o 
resultado é maior que 0). 


Ruby e seus cubos estão contentes 


O blog YouCube, agora, está aproximando-se da visão de Ruby 
para um blog de quebra-cabeças do cubo que compartilha cada 
pensamento cubista seu com o universo. 


OO Orisii YoCuba z Tha Bog for Cuba Purmers 


YouCube - The Blog for Cube Puzzlers 


PaL e O je online. Vies That one ch abeat- 


VNSDO08 jpe but of unse, now Pm bored and shopping for a new one. 


8/16/2008 
Managed to get a headache 
14/2008 
77 Tot tbe new cube I ordered. ls a 


Somos me | A 


Dose 


As emtradas do blog são 
ordenadas com à mais 
recente, primeiramente, 


over the new cube. Gotta nap. 


pearl. 


As datas são 


7 
claras € legiveis, 


como dar vida aos dados 


F: Como o método Array. 
sort ( ) sabe usar uma 
função de comparação 
personalizada ou uma 
comparação padrão? 


JR; Esta decisão é tomada com 
base em um argumento ser ou não 
transmitido para a função sort ( ). 
Se não houver nenhum argumento, 
uma comparação de classificação 
padrão será adotada. Se um 
argumento for fomecido, ele será 
interpretado como uma referência da 
função e usado como a base para 
comparar os itens na classificação. 
Portanto, a referência da função 

de comparação é um argumento 
opcional. 


Adoro meu blog quase 
tanto quanto meus 
quebra-cabeças! 
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um quebra-cabeças de pesquisa de palavras 


A pesquisa seria ótima 


Uma string de 
O YouCube está se saindo muito bem, mas vários usuários têm solicitado PESguisa e fornecida 
um recurso de pesquisa que os permita procurar todos os envios do €, então, usada para 
blog. Como Ruby pretende, possivelmente, ter muitos envios do blog, ela pesg sds Fiz a 
concorda que esse poderia ser um recurso muito útil, especialmente em e 
uma longa jornada. 


ato do corpo do 
blog, 


7x7x7 J 


Search the Blog 


1) 
pose cubel ordered. Its ar 


pearl. a 


eal 


; ow 
ee new cube but of re a 
t'mbored and shopping fora 


Um recurso de pesquisa permitiria 
aos usuários pesquisar todos os 
meus envios do blog simplesmente 
fornecendo um termo de pesquisa. 


2008% — img over 
O Srinagedto seta headache to ode 
thenew cube. 
Gottanop. 


08/29/2008 
prospect ora G xed feelings. 
O ihe pect ş díxito ube Mixed f sé 


Ruby precisa apenas de um plano para saber como 


codificar o recurso de pesquisa no YouCube... os 
objetos poderiam, possivelmente, estar envolvidos? 
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Como pesquisar o array do blog 


Um recurso de pesquisa para o YouCube envolve fazer um loop em cada entrada 
no array do blog procurando um texto coincidente em cada envio do blog. 


Search the Blog ||7x7x7 


Obtenha o texto de 
pesquisa com o usuário. 


Esta construção faz muito sentido, 
mas como pesquiso o texto em uma 
entrada do blog? Estou desorientada... 


Faça um loop 
mas sei que há um meio! 


nas entradas. 


Verifique a 
coincidência do 
texto em cada 
entrada do blog. 


Saia do loop se houver 
uma coincidência. 


OS Poder do 
XxX cérebro 


Como você poderia pesquisar as entradas do blog 
YouCube para obter uma string coincidente de texto? 
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coloque tudo em uma string 


Já sabemos que uma string é, na verdade, 
um objeto. Portanto, é possível que a string 
possa simplesmente pesquisar a si mesma? 


Uma string é um objeto pesquisável. 


Talvez, você esteja começando a descobrir que os objetos estão 
em todo lugar no JavaScript. As strings são objetos e incluem 
muitos métodos úteis para interagir com os dados da string 
(texto). E, sim, um desses métodos permite pesquisar uma parte 
do texto dentro de uma string. Uma string dentro de uma string é 
algumas vezes referida como substring. 


Pesguise Para saber 
sea string contém 


certa substring, 


e, 


Descubra onde 


certo caractere 
charAt() Poa nto: a A 
na string. 
O número de na 
caracteres onverta a 
na string. Ee string em letras 


minusculas ou 
7 
maivsculas, 
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Como pesquisar as strings: indexOf( ) 


O método index0f ( ) permite pesquisar uma string de texto, uma substring, 
dentro de um objeto String. A substring é transmitida como um argumento para o 
método index0f ( ) — uma vez que você chama o método em um objeto String, 
não há nenhuma necessidade de transmitir nada mais. O método index0f ( ) 
retornará o índice onde a substring está localizada ou —1 se não houver nenhuma 
coincidência. 


var str = “Got the new cube I ordered. It's a real pearl.”; 


alert EEE: 8 
EE — a] 


Para compreender de onde vem o número 8 neste exemplo, você tem que ver uma 
string de modo muito parecido com um array de caracteres individuais. 


0 10 20 30 40. 
[EN RNNRNRENRNENERERRERERRNRENEEREEENEEEE 
“Got the pew cube I ordered. It's a real pearl.” A 


Cada caractere na 
h 

string esta localizado em 

197 
um Unico indice gue comta 

4 

apartir de O no inicia 
da string. 


A string de pesquisa new 
aparece na indice 8 na string, 


Quando indexOf ( ) for usado para pesquisar uma string que não existe, o 
resultado do método será —1. 


O resultado é -/, uma ves 
grea string de pesquisa não 
Eo aparece no objeto String. 


Abaixo, está uma das charadas favoritas de Ruby. Identifique o índice de 
cada ocorrência da substring “cub” na string da charada. 


var searchIndex = 


Exercício 


“Uma cubista cubou dois cubos e acabou com oito. Ela era cubana?” 
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solução do exercício 


Abaixo, está uma das charadas favoritas de Ruby. Identifique o índice de cada 
ocorrência da substring “cub” na string da charada. 
Solução do 
Exercício O inicio da string A resposta não e obvia? 
Hem um indice O, 


“Uma cubista Gubôu dois eubos e acabou com oito. Ela era cubana?” 


O indice da N S 
substring e/2. O indice da substring é 24 


Como pesquisar o array do blog 


A pesquisa da string não é difícil demais graças ao método index0f ( ) do 
objeto String, mas Ruby ainda tem um blog inteiro a pesquisar. Seu plano é 
fazer um loop no array de entradas do blog c usar o método indexOf ( ) para 
pesquisar uma substring no texto de corpo de cada entrada do blog. Se houver uma 
coincidência, ela desejará exibir a entrada do blog em uma caixa de alerta. 


Antes de escrever uma função para lidar com a pesquisa real do blog, o blog 
YouCube precisará de um campo de texto para o texto de pesquisa, assim como um 
botão para iniciar uma pesquisa. 


<input type="button” id="search” value= 


E orcii- E > 


<input type="text” id="SESEGHESNE” name="searchtext” value="" /> 


O texto de pesquisa do blog 
Te: al 
é acessivel através do LÌ do Exta da pesquisa! 


texto de pesquisa, 
Search the Blog ||7x7x7 


O sotão Search 
chama a função 
searchBlos ) para 
pesquisar o blog, 


Com os elementos de pesquisa HTML colocados, tudo que 
resta é reunir o código para a função searchBlog( ). 
Como a função usa um alerta para exibir os resultados 

da pesquisa, não há nenhuma necessidade de retornar 
informações dela. Também não há nenhuma necessidade 
de um argumento, pois a função lê diretamente o texto de 
pesquisa a partir do campo de texto HTML. 
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pes Ímãs de geladeira JavaScript 


A função searchBlog ( ) do YouCube é responsável por fazer um loop no array 
de entradas do blog e pesquisar um texto coincidente em um corpo do blog. Ajude 
Ruby a terminar a função preenchendo o código que falta com os ímãs. Sugestão: O 
resultado da pesquisa coincidente deve ser exibido com sua data na forma MM/DD/ 
AAAA dentro de colchetes, seguido do texto do corpo do blog. 


function searchBlogi ) t 


v).value; 
document .getElementByTd(”.- 


pim 
for (var i= 0 ice 


t 


se ada do blog contém o texto de pesquisa 
j 1 
| veja se a entr 


caset 3) t= -1) 1 
toLowercase( y . index0f (searchText.. toLomer6 
if (plogtil. - E e 


alert" + dbloglil eette è - 


este 1 É + 
.getrullyear( 
blog(i) .date.getDate( ) + + bloglil. 


bloglil- 


Pv; 


break; 


i 


mensagem 
to da pesquisa não foi encontrado, exiba uma 
[1 se c texi 


, 


i earch text.”); 
cre are no blog entries containing the se: 
alert (*Sorry, the e 


blog.length 


getMonth( ) 
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Solução dos imãs de geladeira JavaScript 


A função searchBlog( ) do YouCube é responsável por fazer um loop no 
array de entradas do blog e pesquisar um texto coincidente em um corpo do blog. 
Ajude Ruby a terminar a função preenchendo o código que falta com os ímãs. 
Sugestão: O resultado da pesquisa coincidente deve ser exibido com sua data na 
forma MM/DD/AAAA dentro de colchetes, seguido do texto do corpo do blog. 


Primeiro obtenha o texto de 
pesquisa no campo de texto HTML. 


ve m de pesquisa 
a se à entrada do blog contém o texto de Pe E 
/ Vej 


sati A 
toLowerCase í ) . indexo£ (searchText .toLowerca: el) S 
if tbloglil. - é 


blogtiJ .date.getDate( ) + “/” + blogtil. -- 


Ver 


„getFullyeart ) + “I “+ 
bloglil. 


break; 


, 


se o text: pesquisa não foi encontrado, e mensagem 
xto da pesquisa foi encontrado, exiba uma 
/ 


blog. length 


if (4 mm 


earch text.”)5 
containing the searc! 

re no blog entries con 

lert (“Sorry, there a 


A emtrada do blog coincidente é 
y. 


formatada com UUA/DD/ BRA entre 
Se i for igual ao comprimento do blog, colchetes, seguida do exta dä corpa. 
Significara que o loop for percorreu 

fodas as embradas do bles sem 

encombrar uma coincidência, 
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A pesquisa funciona agora também! 


O YouCube 2.0, agora, está completo com um recurso de pesquisa que conta muito 
com as capacidades de pesquisa predefinidas no objeto String. É um ótimo 
exemplo de como os objetos tornam ativos os dados, neste caso transformando 
uma string de texto (dados puros) em uma entidade que tem um comportamento 
(pode pesquisar a si mesma). E talvez o mais importante, evitou que Ruby tivesse 


que inventar sua própria rotina de pesquisa, permitindo que ela se concentre na 
escrita de seu blog, 


apii YouCube - The Bog for Cube Puzzlers. si musa. = 
cupins sf 
` YouCube - The Blog for Cube Puzzlers 


18/29/2008] Met up with some fellow cubers 


to discuss 
the prospect of a 7x7x7 cube. Mixed. i 


= 
CE 


_Search the Biog | 


Met up with some fellow cubers to discuss the 
feelings. 


ada 17x1 cube for sale online. Yikes! That one could be a beast. 


8/19/2008 Tm bored and shopping for a new one. A pesquisa do blog 
Solved the new cube but of course, nom é impressionante! 


o get a headache toiling over the new cube. Gota nap: 


T a TO cube I ordered. I's a real part 


Show A Bog Entries | 


E o 


Ruby está vibrando com o novo recurso do blog, mas 
ela não é uma pessoa que descansa sobre os louros. 
Ela já tem o YouCube 3,0 em mente... 
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na verdade, nenhuma delas é idiota 


P: Ainda não compreendo 
bem como toda string é 
realmente um objeto. É de 
fato verdade? 


R: sim. Toda string no JavaScript é 
um objeto. Se você colocar seu nome 
entre aspas no código JavaScript, 
como em “Ruby”, acabará de criar 
um objeto. Embora possa parecer 

um excesso, o aspecto positivo do 
JavaScript tratar toda string como 

um objeto é que toda string tem a 
capacidade de fazer coisas úteis 
como, por exemplo, saber seu próprio 
comprimento, pesquisar as substrings 
dentro do si mesma etc. 


P: Então, entendi que uma 
string é um objeto, mas 
também parece muito com 
um array com índices de 
caractere e tudo mais. Uma 
string também é um array? 


R: Não. Uma string não é 
definitivamente um array. Contudo, 

é verdade que muitos métodos 
String operam nos dados da string 
como se eles fossem um array de 
caracteres individuais. Por exemplo, os 
caracteres dentro de uma string iniciam 
no índice 0 e contam um caractere 

de cada vez quando você percorre a 
string. Mas você não pode acessar 

um caractere dentro de uma string 
usando colchetes ([ 1), como pode 
com um array. Assim, embora ajude 

a considerar os caracteres dentro de 
um array como sendo parecidos com 


Qy rmos de Bala 


representação de texto. 
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= O método toString( ) é usado 
para converter qualquer objeto em uma 


m Os arrays e as strings são realmente apenas = 
objetos, contando com os objetos Array 
e String padrões no JavaScript para seus 
métodos e armazenamento de dados. 


Não existem 
Perguntas Ídiotas 


os elementos em um array, você não 
trabalha literalmente com um objeto 
String do mesmo modo como 
trabalha com um objeto Array. 


P: A função searchBlog( ) 

poderia ter usado charAt ( ) 

ao invés de index0f ( ) para 
a pesquisa do blog? 


R: não. O método charat ( ) 
pesquisa apenas um único caractere, 
que não seria muito útil ao pesquisar o 
blog para obter uma frase de texto. O 
método index0f ( ) pesquisa uma 
string, não apenas um único caractere 
e é a melhor ferramenta para o serviço 
neste caso. 


E: É possível pesquisar uma 
string para obter mais de uma 
ocorrência de uma substring 
de pesquisa? 


R: Sim. O método indexof ( 

) tem como padrão pesquisar a 
primeira ocorrência da substring de 
pesquisa. Mas você pode transmitir 
um segundo argumento opcional que 
informa a index0£ ( ) onde iniciar 
a pesquisa. Portanto, digamos que 
esteja pesquisando a string “cubo” e 
encontrou uma coincidência no índice 
11. Você poderá chamar index0£ ( 
) novamente com um segundo 
argumento 11, que fará com que inicie 
a pesquisa no índice 12. Portanto, 


= Ométodo sort ( ) doobjeto Array 
pode ser usado para classificar um array 
em qualquer ordem desejada. 


O método index0f ( ) no objeto 
String pesquisa uma string de texto 
dentro de outra string, retornando o 
índice do local da string de pesquisa. 


a solução geral é transmitir o índice 
de pesquisa anterior para o método 
index0f( ) para continuar a 
pesquisar uma string. 


FT: Qual é a finalidade 

das duas chamadas para 
toLowerCase( ) na função 
searchBlog( )? 


R: Grande pergunta! A resposta tem 
relação com o problema das letras 
maiúsculas e minúsculas quando a 
pesquisa do texto é feita no blog. Se 
alguém pesquisar o blog para obter 

a palavra “cubo”, provavelmente 
desejará todas as coincidências com 
a palavra, inclusive “cubo”, “Cubo”, 
“CUBO” e qualquer outra variação nas 
letras da palavra. Um modo simples 
de resolver esse problema é converter 
s substring de pesquisa e o texto do 
corpo do blog em uma letra em comum 
antes de executar a pesquisa. Embora 
afunção searchBlog( ) use 
toLowerCase( ),o método 
toUppercase( ) funcionaria 
também. O problema é remover 
inteiramente as letras maiúsculas e 
minúsculas da pesquisa. 
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Pa 
Um YouCube aleatório 
Na busca sem fim para manter os usuários interessados em seu blog, Ruby sugeriu 
mais um acréscimo ao YouCube que ela acha que seus colegas de quebra-cabeças 
gostarão. Ela deseja adicionar um botão Random (Aleatório) que permita aos 
visitantes exibir uma entrada do blog aleatoriamente. 


he new cube. 


4 
0811612005 a adoche toing over 
o getahe 


08/4/2008 


Gottanap. 


08/29/2008 
_ Met up with some fellow cubers to discuss the 


prospect of a 7x1x7 cube. Mixed feelings. 


mes 
osaan 8 


coudbe abesst. 


Um recurso do blog aleatório 
adiciona um toque de diversão 
e mistério ao YouCube. Sou 
divertida e misteriosa! 


Kuby, à blogger do. 
pilre de cubo ea 


mulher dos misterios. 


Poder do 
cérebro 


Você poderia escolher uma entrada do 
blog YouCube aleatoriamente? 
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tudo tem seu lugar 


O objeto Math é um objeto organizacional 


Para ajudar Ruby a adicionar um recurso aleatório ao YouCube, precisamos 
desesperadamente de um modo de gerar números aleatórios. Isso envolve usar 
um objeto JavaScript predefinido que não é tão “vivo” quanto alguns dos outros 
objetos usados. O objeto Math padrão é onde os números aleatórios podem ser 
gerados, é um objeto único no sentido de que não tem nenhum dado que muda e 
nenhum método que atue nos dados internos. 


Prredonde um número com 
porto flutuante para obter 
um inteiro, 


Prredonde PARA BATXO um 
número com ponto flutuante 
para obter um inteiro, 


li EI Prredande PARA 

( CIMA um nimero com 

PN ponto flutuante para 
A constante obter um inteiro, ; 
377 a Gere um número 


aleatório ertre De f. 
O objeto Math é um objeto organizacional que significa 


que é apenas uma coleção de métodos e constantes utilitários () objeto Math é um 
relacionados à matemática. Não existe nenhuma variável, o 
o 


que significa que o objeto Math não mantém nenhum cesado objeto organizacional 


— você não pode usá-lo para armazenar nada. Os únicos dados 


que ele contém são algumas constantes como, por exemplo, que hospeda 
PI (3.14). Os métodos no objeto Math, porém, são bem úteis. 


Por exemplo, o método random ( ) gera um número com métodos e constantes 


ponto flutuante aleatório entre O e 1. fia 
matemáticos. 


Escreva os resultados das seguintes chamadas para os métodos Math. 
ercício 
Math. round (Math. PI) 


Math.ceiling(Math.PI) 


Math.random( ) 


————>» Respostas na página 436. 
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Objeto Math em exposição 
Entrevista desta semana: 
Quando as funções matemáticas entram em conflito 


Use a Cabeça: Tudo bem, realmente estou 
confuso. Você é um objeto, mas ouvi falar que 
não faz nada, exceto manter alguns métodos 
matemáticos e algumas constantes. Pensei que o 
objetivo dos objetos fosse tornar os dados ativos. 
Você sabe, integrar alguns dados e, então, ter 
métodos que façam coisas legais com eles. 

Math: É isso que o bom senso JavaScript 
convencional leva pessoas a pensar, mas nem 
todos os objetos são para dar vida aos dados. 

É perfeitamente aceitável para um objeto 
desempenhar o papel de organizador, como eu. 
Use a Cabeça: Mas todos esses métodos 
matemáticos não poderiam ter sido criados apenas 
como funções padrões? 

Math: Sim, poderiam, mas você está esquecendo 
que a linguagem JavaScript é composta de objetos. 
Portanto, na realidade, não existe tal coisa como 
uma função “padrão”. 

Use a Cabeça: Mas eu posso criar uma função 
fora de um objeto e ela parece funcionar bem. 
Math: Certo, mas na verdade todas as funções 
realmente são métodos porque pertencem a um 
objeto em algum lugar, mesmo que ele esteja 
oculto. Isso ajuda a explicar por que não há 
“funções padrões”. 

Use a Cabeça: Ah, compreendo. Está começando 
a fazer mais sentido por que você contém aqueles 
métodos matemáticos. 

Math: E não se esqueça de que só porque eu não 
tenho dados internos que são manipulados por 
meus métodos, não significa que não desempenho 
um papel importante ao ser um objeto. 

Use a Cabeça: O que você quer dizer? 


Math: Bem, imagine um grupo de pessoas que 
compartilham um interesse em comum como, por 
exemplo, os quebra-cabeças de cubo. Em muitos 
casos, tais pessoas organizam-sc para que possam 
interagir umas com as outras sobre seu interesse. 
Embora os métodos matemáticos não sejam 


exatamente tão sociais quanto as pessoas, eles 
aproveitam a organização que eu forneço. 


Use a Cabeça: Porque estão todos relacionados a 
um interesse em comum, você quer dizer. 

Math: Sim! E esse interesse é executar tarefas 
matemáticas como, por exemplo, arredondar 
números, executar operações trigonométricas e 
gerar números aleatórios. 

Use a Cabeça: Você menciona a geração de 
números aleatórios. Ouvi dizer que seus números 
não são realmente aleatórios. Há alguma verdade 
neste boato? 


Math: Tenho que confessar que não, eles não são 
realmente aleatórios. E nem a maioria dos números 
aleatórios gerados pelo computador. Meus 
números aleatórios são 'pseudo-aleatórios”, o que é 
bom o bastante para grande parte das situações. 


Use a Cabeça: Pscudo-aleatórios, é como a 
pscudociência... ou o pseudocódigo? 


Math: Th, não e sim. Não, nada de pseudociência. 
E sim, um pouco como o pseudocódigo, uma 
vez que o pseudocódigo é para representar a idéia 
por trás do código sem realmente ser o código. 
No caso dos números pseudo-aleatórios, eles 
aproximam-se do caráter aleatório sem realmente 
serem aleatórios. 


Use a Cabeça: Portanto, posso acreditar que os 
números pscudo-aleatórios são suficientemente 
aleatórios para a maioria das aplicações JavaScript? 
Math: Sim, e é uma boa maneira de colocar isso: 
“suficientemente aleatórios”. Provavelmente, você 
não gostaria de confiar nos números pseudo- 
aleatórios para as questões que envolvem a 
segurança nacional, mas funcionam muito bem 
para introduzir o caráter aleatório em cada script do 
cotidiano. 
Use a Cabeça: Entendi. Bem, obrigado por seu 
tempo... e por sua honestidade em relação aos 
números aleatórios. 
Math: Prazer... você sabe que não posso mentir. 
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solução do exercício 


Escreva os resultados das seguintes chamadas para os métodos Math. 


Placido 3d O maximo 
à É arredonda 
Solução Carredondar para 


pad para po: cima) de SL fé y. 
3 


Math. round (Math. PI) 


Math.ceiling(Math.PI) 


Math. random( ) 5 


iosa! 


Desculpe, foi uma puesto ca 
do 7 
Você não pode saber porgue é aleatório, 


Gere números aleatórios com Math.random 


Pseudo-aleatórios ou não, os números aleatórios gerados pelo 
método random ( ) do objeto Math são extremamente úteis e 
em aplicativos como, por exemplo, o YouCube, que precisam Cada um dos nimeras 
fazer uma seleção aleatória a partir de uma coleção de dados. O aleatorios esta na 
problema é que random ( ) retorna um número aleatório na faixa de O a f. 

faixa de 0 e 1, ao passo que Ruby precisa de um número aleatório 

que esteja na faixa de O até o final do array do blog. Em outras 


palavras, ela precisa gerar um índice aleatório do blog. 0.7899028671185206 


alert (Math. random()); em = 


0.436 
alert Math.random 0); mm 133583181724 


alert (Math.random () ) ; 
dedo ci: 0.9028598527916905 


Para gerar um número aleatório dentro de uma 


faixa diferente de 0 a 1, você tem que confiar no 
objeto Math um pouco mais e usar outro método. 
O método floor ( ) arredonda para baixo um 
número até o inteiro mais próximo e é perfeito para 
gerar inteiros aleatórios dentro de uma faixa dada de 


inteiros. -S 


pa ee q 


var oneToSix = Math.floor (Math.random() * 6) + 1; 


= 


Pb 
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iP: Por que não é necessário 
criar um objeto Math antes de 
usá-lo? 


R: Ah, esta é uma pergunta 
perceptiva e toca em um conceito 
muito importante relacionado aos 
objetos. Como o objeto Math não 
contém, de fato, dados que podem 
mudar, também conhecidos como 
dados de instância, não há nenhuma 
necessidade de criar um objeto. 
Lembre-se de que o objeto Math. 

é apenas uma coleção de métodos 
estáticos e constantes, portanto tudo 
que entra no objeto Math já existe 
— não há nada a criar. Isso fará muito 
mais sentido no Capítulo 10, quando 
você aprender sobre os detalhes das 
instâncias e das classes do objeto. 


do e seu Lápis 


Não existem 
Perguntas Ídiotas 


P: Qual é a diferença entre 
os métodos round ( ) e 
floor ( ) do objeto Math? 


R: O método round ( ) arredonda 
para cima ou para baixo o número 
dependendo de sua parte decimal. Por 
exemplo, Math. round (11.375) 
resulta em 11, ao passo que Math . 
round (11.625) resulta em 12. 

O método floor ( ), por outro lado, 
sempre arredonda para baixo, não 
importando qual é a parte decimal. 
Você pode simplesmente considerar 

o método floor ( ) como sempre 
cortando a parte decimal. 


e 


Nerd 


aleatórios. 


searchBlog( ). 


Se você estiver trabalhando em um aplicativo 
JavaScript que precisa desesperadamente de 
números aleatórios verdadeiros, veja htrp:// 
random.org para aprender mais sobre como 
ir além do domínio dos números pseudo- 


Escreva o código para uma função randomBlog ( ) que 
seleciona uma entrada do blog aleatoriamente e, então, mostre-a 
em uma caixa de alerta. Sugestão: A entrada do blog na caixa 

de alerta pode ser formatada como o resultado da pesquisa em 


como dar vida aos dados 


f: O que mais o objeto Math 
pode fazer? 


R: Muitas coisas. Dois métodos úteis 
dos quais não precisamos ainda são 
min( ) emax( ), que analisam 
dois números e retomam o menor 


ou o maior deles. abs ( ) é outro 
método Math muito útil - seu trabalho 
é retornar um número positivo, não 
importando o número fornecido. 
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solução inteligente 


Aponte seu Lápis 
~ Solução Escreva o código para uma função randomBlog ( ) que 


seleciona uma entrada do blog aleatoriamente e, então, mostre-a 
em uma caixa de alerta. Sugestão: A entrada do blog na caixa 

de alerta pode ser formatada como o resultado da pesquisa em 
searchBlog( ). 


Use um número 
aleatorio para 
selecionar uma 
embrada do blog, 


4 4 
Gere um número aleatorio emtre O e um 
menos a comprimento do blog, 


function randomBlog( ) ( 


.!! Selecione um número aleatório entre O e blog. length - 


Formate a entrada do blog com uma data MMA/DD/ du 
ARAR seguida de texto do corpa, 


Aleatório, mas ainda falta 


Agora, o blog de Ruby suporta um recurso de pesquisa do blog aleatório, com o 
qual ela está muito contente. Agora, os usuários podem exibir o blog YouCube A entrada do 


com um sentimento saudável de curiosidade, uma vez que não sabem cas blog escolhida 
entrada obterão. aleatoriamente. 
EE pe the prospect of a 7x7%7 7 cube. e Met Ne 
1 
a some fellow saibesa 
feelings. i6200 Managed to get a headache toiling over the 
8 „Yikes ; "ew cube. Gotta nap. 
mia a 1x7x7 cube for sale 


Mesmo com entusiasmo sobre o novo recurso do blog, Ruby tem um 
sentimento inoportuno de que algo ainda falta no YouCube. Seu “objeto” 
Blog é atualmente apenas algumas propriedades que contam com muitas 

funções separadas. Isso não parece uma construção de objeto muito boa... 
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Um objeto em busca de ações 


Os instintos de Ruby sobre o objeto YouCube 
estão certíssimos. À parte comportamental do 
objeto é extremamente ausente e poderia usar 
alguma reestruturação crítica para que use métodos 
para lidar com as tarefas específicas do blog. Ruby 
precisa de métodos que acrescentem algumas ações 
ao objeto Blog! 


— au Aponte seu Lápis 


Eu realmente poderia usar 
alguns métodos do blog. 


tude o código YouCube e circule qualquer código que ache que 
poderia ser colocado nos métodos Blog; nomeie cada método. 


function showBlog (numEntries) | 
// Primeiro classifique o blog na ordem cronológica inversa (a mais recente primeiro) 
blog. sort tfunction(blogl, blog2) { return blog2.date - blogl.date; |); 


// Ajuste o número de entradas para exibir o blog completo, se necessário 
1£ ('numêntries) 
numEntries = blog.length; 


// Exiba as entradas do blog 
var i = 0, blogText = “r; 
while (i < blog.length && i < numêntries) 
// Use um segundo plano cinza para uma entrada sim outra não do blog 
if (142 == 0) ` 
blogText += “<p style=’ background-color : #EEEEEE’ >"; 
else 
blogText += "<p>"; 


// Gere c código HTML formatado do blog 

blogText += "<strong>" + (blog[i] .date.getMontht ) + 1) + “/ 
blog[il.date.getDate( ) + w/” + 
blog[i]-.date.getFullYear( ) + “</strong><br />” + 
blog[i] body + “</p>”; 

itt; 


} 


// Defina o código HTML do blog na página 
document .getElementById (“blog”) innerHTML = blogText; 
, 


function searchBlog( ) ( 
var searchText = document .getElementById ("searchtext”) 
for (var i = 0; i <blog.length; i++) ( 
/! Veja se a entrada do blog contém o texto de pesquisa 
if (blog[i] .body.toLowerCase( ).index0f (searchText. toLowerCase( )) != -1) ( 
alert (“[* + (blog[i].date.getMonth( ) + 1) + “/” + blogli].date.getDate() + “/* + 
blog[i] .date.getFullvear( ) + *] “ + blog[i] body); 
break; 


, 


// Se o texto de pesquisa não foi encontrado, exiba uma mensagem 
if (i == blog.length) 
alert (“Sorry, there are no blog entries containing the search text.”); 
y 


function randomBlog( ) ( 
// Selecione um número aleatório entre 0 e blog.length - 1 
var i = Math.floor (Math. random() * blog. lenath) ; 
alert (“[" + (blog[i] .date.getMonth() + 1) + “/” + blog[i] date.getDate() + “7” + 
blog[i] .date.getFullvear() + “] * + blog[i] body); 
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solução inteligente 


Aponte seu Lápis 
A Estude o código YouCube e circule qualquer código que ache que 


poderia ser colocado nos métodos Blog; nomeie cada método. 


function showBlog (numEntries) ( 
4! Primeiro classifique o blog na ordem cronológica inversa (a mais recente primeiro) 


blog.sort (function (blogl, blog2) | return blog2.date - blogl.date; |); 


/! Ajuste o número de entradas para exibir o blog completo, se necessário 


if (!numêntries) 
numEntries = blog. length Converta a 
entrada da blog na 
// Exiba as entradas do blog pp TOA 
var i = 0, biogText = *"; HT mata. 
while (i < bl + + æ blogt TALC > 


44 im segundo plano cinza para uma entrada sim outra não do 
É (1%2==0) 
blegText += “<p style='background-color: #EEEEBE” >”; 
else 
blogText += “<p>”; 


/1 Gere o código HTML formatado do blog 
blogText += “<strong>” + (blog[i] .date.getMonth( ) + 1) + 5/7 + 
blog[i].date.getDate( ) + “/” + 

blogli].date.getFullYear( ) + "</strong><br />” + 
ogli] body + “</p>”; 


itt; 
) 


4) Defina o código HTML do blog na página 
document . getElementById (“blog”) . innerHTML = blogText; 


) 


function searchBlogt ) { 
var searchText = document .getElementById (“searchtext”) .value; 


for (var i = 0; 1 < blog.length; i++) { 


date .getDate() + 


jÍ Se o texto de pesquisa não foi encontrado, exiba uma mensagem 


if ii == blog.length) 
alert (“Sorry, there are no blog entries containing the search text.”); 


1 


function randomBlog( ) ( 
4) Selecione um número aleatório entre 0 e blog.length - 1 


var i = Math.floor (Math.random() * blog. length); 
alert(“[“ + (blog[i] .date.getMonth() + 1) + “/” + blog[i] .date.getDate() + “/” + 


blog[i].date.getFullYsar() + “] “ + bloglil.body): 
} 
Biog- tH TULO Blos.combainsTdo BlogioStringos 
Converta uma entrada do blog Não é muita código, mas ainda Converta uma entrada do 
no codigo HTL formatado gee um método digno, uma ves que blag em uma string, pretas 
refira muita ta esponsasilidade do uma entrada do blog deve ser sentido vsar em gualgver 
outro cadigo gue deseja exibir um capas, de pesquisar seu propria situação onde a data é 


blog com uma formatação limpa, corpo para obter o texto. mostrada entre colchetes 
com o fexto do corpo dentro, 
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Não existem 
Perguntas Idiotas 


P: Como você sabe qual código de script deve 
entrar em um método? 


R: Bem, primeiro você tem que se lembrar o que um método 
deve fazer, como o ideal, e isso é para tomar algum tipo de 
ação com base no estado (dados) de um objeto. Até certo 
ponto, descobrir os métodos para um objeto envolve descobrir 
o que o objeto está realmente fazendo ou precisa fazer. Então, 
Concentre-se em capacitar os objetos para que façam as coisas 
por si mesmos. 

Como exemplo, faz sentido para o objeto B1 og transformar-se 
em uma string ou código HTML formatado, uma vez que essas 
duas ações requerem acesso aos dados internos do blog. Do 
mesmo modo, pesquisar o texto dentro de uma entrada do 
blog é uma ação que deve ser intema para o objeto Blog e, 


portanto, faz muito sentido como um método. 


P: Portanto, há um exemplo de uma ação que 
o objeto Blog não deveria tomar? 


IR, As ações que estão muito fora do escopo doobjeto B109 
poderiam ser coisas como, por exemplo, exibir ou pesquisar a 
lista de entradas do blog. É porque o objeto B1 og representa 
uma única entrada do blog. É por isso que o array do blog 
consiste em diversos objetos Blog individuais. Assim, 
cada objeto Blog individual não precisa se preocupar com 
uma coleção de objetos B1 09. Ao contrário, um objeto BLog 
individual deve cuidar de seu próprio negócio, que envolve 
tomar uma ação com base unicamente em sua própria data 
e texto do corpo. 


Transforme uma função em um método 


Agora que algumas partes do código YouCube foram separadas, ajustando-se bem como 
métodos do objeto Blog, vejamos mais de perto como converter uma delas em um método 
Blog. O método é containsText ( ), que assume a responsabilidade de pesquisar o `+ 
corpo de uma entrada do blog para obter uma substring. Mover o código de pesquisa para 

um método envolve, basicamente, operar diretamente na propriedade body de um objeto 
Blog, em oposição a uma variável local na função searchBlog ( ). Estas etapas ajudam a 


esclarecer o processo: 


Declare o método, complete com uma 


lista de argumentos, se requerido, como, por 
exemplo, o argumento do texto de pesquisa para 


containsText ( ). 


Mova o código existente para o novo 
método. 


Mude o código relevante para 

usar as propriedades do objeto como, 
por exemplo, this . body no método 
containsText( ). 


e fponte seu Lápis 


Escreva o código para o método containsText ( ) do objeto 
Blog, que é criado no construtor Blog ( ) atribuindo uma literal 
da função a this.containsText. 


Blog 


containsText () 
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mude rapidamente 


Aponte seu Lápis 
E: a Escreva o o para o método containsText ( ) 
Na Solução P 


do objeto Blog, que é criado no construtor Blog ( ) 
atribuindo uma literal da função a this. containsText. 


O método € criado atribuindo uma literal 
ds da função a uma referência do metodo. 


this.containsText = function(text) ( 


return (this body.toLowerCase( ) . indexof (text. toLowerCase( )). 


lay ra-chave Phi: é usado ia 
A palay archave This € Usada para cria” O S disa dentro do método acessa uma 
um metado do mesmo modo como € usada 


A propriedade do objeta diretamente usando a 
a a palavra-chave this. 


Revele o novo objeto do blog brilhante 


Os outros dois métodos novos do blog juntam-se ao método 


containsText ( ) em uma nova versão do objeto Blog que tem 
propriedades e métodos. 


Crie e imicialize as iedades. 
function Blog (body, date) ( e e inicialize as propriedades, 


7! atribua as propriedades €— 1 


O método Stringi) netanna 
this.body = body; 


tnis.date = date; ai emtrada do blog formatada 
4! Retorne uma representação de string da entrada do blog 


ama uma string de texto, 
Esse! as à aj” + this.date.getDate( | + yra 
r =[* + ithis.date.getMonth{ ) + r TE No i tl . $ 
r a MIL EPÓdE! TZ do Mu É this.body; O método +oltTIAL 
retorna a embrada do blog 
/! Retorne uma representação HTML formatada da entrada do blos Fesme um código rui 
tnis.toHTML = function (highlight) t 


ado formatado elegante. 


7) Use un segundo plano cinza como um destaque, S4 especi! 
blogHTML = “7; > A er 
Ligue 2 “ep style=” background-cotor:EEEEEE p 


4! Gere d codigo HTML do blog formatado 


clan a) dE eA 
strong” + (thia-date.gerMonth( | À PY Ga 
blogum de M<sronan ento dave. gotrulivenr ( ) + </strongnçhe / 

his.date. / 

this.body + “</p>”; E f o 
return blogETHL; metado comtunsTexteS retornará 


va Prue se a texto do corpo contiver a 
Jj veja se o corpo do blog contém uma string de texto SÉring de pesquisa ou false, do combrário, 


con Text ext) 1 
his.containstext = function (text) na, 
acurn ((thia. body. toLowerCase ( ) . indexof (text .toLomerCase( )) 


-1); 


n 
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O que os objetos realmente oferecem ao YouGube? 


Foi somente na nova versão do objeto Blog (disponível em wyw:aitabooks. 
com.br) ligada ao seript YouCube que as vantagens reais da programação 
orientada a objeto foi mostrada. Agora que as várias tarefas importantes 
específicas do blog são delegadas aos métodos Blog, o código do script fica 


muito mais simples. 
O novo objeto 
Blog simplifica o 
seript YouCube. 


4) Exiba a lista de entradas do blog 
function showBlog (numEntries) ( 
// Primeiro, classifique o blog na ordem cronológica inversa (a mais recente primeiro) 
blog. sort (function (blogl, blog2) { return blog2.date - blogl.date; |); 


4! Ajuste o número de entradas para exibir o blog completo, se necessário 
if (!numêntries) 
numEntries = blog. length; 


4! Exiba as entradas do blog O método oH TULC E 


var i = 0, blogListHIML = “*; Z 
while (i < blog.length && i < numEntries) ( +etalmente responsavel por 


plogrsceamea MR Zormatar vma ertrada do bios 
H 7 
siy como um codigo Hru, 


41 Defina o código HTML do blog na página 
document .getElementById (“blog”). innerHTML = blogListHTML; 
} z 
O metodo 
// Pesquise a lista de entradas do blog para obter uma parte do texto camtbainsTexk > 


function searchBlog( ) ( x 
var searchText = document .getElementById (“searchtext”) .value; cuida da pesquisa 


for (var 1 = 0; à < blog.length; i++) { de uma entrada do 


4! Wej trada do bli tém o texto de 
e a se a entrada do blog contém E ret o de pesquisa blog para obter uma 
alert E substring, 
break; 
4 
“a doa o metodo 
4 
FoStringt ) é um 


// Se O texto de pesquisa não foi encontrado, exiba uma mensagem 
if (i == blog.length) 
alert (“Sorry, there are no blog entries containing the search text.”) sendo chamado 


$ automaticamente 


pouca mais sutil, 


/! Exiba uma entrada do blog escolhida aleatoriamente vando uma 
ai; PM aleatório entre 0 e blog.length - 1 embrada do blog 
var i = Math.floor (Math. random( ) * blog.length); e usada em um 
j alert (MBM) ; “a SS. contexto onde 
uma string e 

esperada. 
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pronto para a grandeza 


YouCube 3.0! 


Era um projeto, mas Ruby resolveu oficialmente que o YouCube 3.0 está bom o 
bastante para cla dar uma parada e voltar a fazer o quebra-cabeças. Ela também está 


entusiasmada em passar algum tempo preparando-se para aquela festa para a qual 
foi convidada... 


O blog esta classificado e 


formatado de modo claro.. Sy m O blog pode ser pesquisado, 


soe NouCube - The Blog for Cube Puzzlers — “4 5. 
“YouCube - The Blog for Cube Puzzlers 


discuss 
[8/29/2008] Met up with some fellow cubers to 
Pb prospect of a 7x7x7 cube. Mixed feelings. 


E 


TX1XT 
Search the Blog || 7x7X: esa 
sanns i aleatoriamente... 
vii some fellow cubers to discuss the prospect of a 7x7x7 cube. Mixed | 
feelings. ni 
1/2008 [8/16/2008] Managed to get a 
ria a 7x7x7 cube for sale online. Yikes! TI new cube. Cotta nap. headache toiling over the 


a the new cube but of course, now Tm! 


ago to get a headache toiling over the new cube. Gotta nap. 
Quem diria que o objeto 


Blog seria meu quebra- 
cabeças favorito? 


4/2008 
o pew cube 1 ordered. I's a real pearl. 


Show All Blog Entries [View a Random Blog Entry] 


Done 


JOIAS « um objeta 
Biog personalizado chamado Bios! 


containsText () 
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Dorre a páama na O que os objetos JavaScript 
os dois cérebros a 
resolver a charada. podem fazer em seus dados? 


4 
B < Lum encombro de mentes! C~ E] 


Pesquisar tudo o que quiser, mas é improvável 
que encontrará algo melhor que um 
objeto JavaScript para fazer coisas 
deste tipo e analisar 
os dados. Eles são até capazes de 
tornar aleatórios os números sem nenhum problema. 
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10 Como criar objetos personalizados X 
* Como lidar com objeto 


A 
personalizados 
Faça agora, pule os intermediários, 
há uma garantia de retorno em + 
dinheiro, será apenas um dólar... 


se pedir agora. Você pode fazer 
do seu jeito, garota! 


Se fosse tão fácil, certamente teríamos feito. O JavaScript não tem uma garantia de retomo 
em dinheiro, mas você pode fazer do seu jeito. Os objetos personalizados são O equivalente JavaScript de uma grande dose 
tripla descafeinada, muito quente, sem creme extra salpicado e sem a espuma marmorizada manchada. Esta é uma xícara de 
café personalizada! E com alguns objetos JavaScript personalizados, você pode planejar algum código que faz exatamente o que 
deseja, enquanto aproveita as vantagens das propriedades e dos métodos. O resultado final é um código reutilizável orientado 
a objetos que estende com eficiência a linguagem JavaScript... só para você! 


o método Blog: uh-uh! 


Como revisitar os métodos Blog do Youlube O blog YouCube 


Quando deixamos Ruby na última vez, ela estava bem entusiasmada funciona, mas ainda 
portertriádo um blog acionado por objetos pasa Escrever sobe 


Ea . 
sel interesse por québea cabeção de cabo: Embors Ruby tente RRS NAO É UM Sinal 
um trabalho decente ao criar o objeto BLog que conduz o blog brilhante da construção 
YouCube, ela perdeu, sem querer, algumas oportunidades principais 


de aplicar os princípios orientados a objetos no YouCube. O mais de programação 
importante, ela não explorou totalmente os diferentes modos do 


. R 
objeto Blog ser mais eficiente, mais organizado e, portanto, mais orientada a objetos. 


mantido no futuro. 
PRR E SETE ERES A vttima versão dos 
O último ajuste que Ruby fez no objeto Blog envolveu a criação de 


rs E Ea s arquivos pode ser baixada em 
três métodos para lidar com várias tarefas específicas do blog. $ e 


www.altabosks com.br, 


Os três métodos 

BI 
cuidam de várias to 
que fazem Sentido ao 
Serem lidadas de dentro 


de uma entrada do blog. 


function Blog (body, date) í 
41 atribua as propriedades 

this.body = body; 

this.date = date; 


e rada do blo 
|! Retorne a representação de string da entrada do blog 

a toString = funcrion( ) ( o ER 
Dm e(o 4 (this date getMontht ) + 1) + 2/7 + this-date.getDat: 
has date getFullYear( ) + “] ” + this.bodyz 


Z; Retorne uma representação HTML formatada da entrada do blog 
this tomm - function (highlight) ( s 
a ceundo plano cinza como um destaque, se especificado 
var DlOgHTML = “”; A A 

blogHTML += highlight ? “<p style='background-colo- 


EEEEEE'>” : “<i 


i formatado 
4) Gere o código HTML do blog - AR 
blogHiNL += “<strong>” + (this date.getMonthi ) + D+ 2/04 ager D7 + 
this.date.getDate( ) + “/” + this.date.getEullvear( à 
tnis.body + “</p>”; 
return blogHTML; 


i 


a nta | 
io Contatandert — a A ndox0E (text .toLovarcame () 


Os métodos YouCube parecem bons superficialmente, 
mas há um problema sutil... 
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Sobrecarga de métodos 


Parecidos com as propriedades do blog, os métodos no objeto Blog 
são criados dentro do construtor usando a palavra-chave this. Essa 
abordagem funciona, mas acaba criando uma nova cópia dos métodos 
para cada objeto Blog que é criado. Portanto, se o blog contiver seis 
entradas, haverá seis cópias dos três métodos Blog. 


Então, você está dizendo que 
o construtor Blog( ) cria três 
métodos para cada objeto Blog. 
Não é um pouco de desperdício? 


Todo objeto 
tema < Brog criado tem 
sua propria 
7 a 
cópia dos três 
j 
métodos Blog, 


containsText() 


O objeto Blog cria, sem querer, mais métodos do que 
precisa, o que é desperdício e ineficiência. 

É verdade, o construtor Blog ( ) cria três métodos sempre que um novo objeto é criado, 

o que significa que todo objeto Blog tem sua própria cópia de cada método. Diferente 

das propriedades, que precisam armazenar dados exclusivos para cada objeto diferente, os 
métodos devem ser compartilhados entre os objetos. Seria uma construção muito melhor se 
todos os objetos Blog compartilhassem uma única cópia de cada método. Isso evita que o 
script fique lotado de métodos desnecessários quando muitas entradas (objetos!) do blog são 
adicionadas com o passar do tempo. 


Poder do 
cérebro 


Como você poderia reconstruir o objeto Blog para que o código do método não fosse duplicado 


em cada novo objeto? 
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agora a classe... nesta instância... 


Classes versus instâncias 


O problema do método duplicado toca em um conceito extremamente importante 
relacionado aos objetos JavaScript: a diferença entre uma classe do objeto e uma 
instância do objeto. Uma classe é uma descrição do objeto, um modelo que 
resume do que é feito um objeto. Uma instância é um objeto real que foi criado 

a partir de uma classe. Em termos reais, uma classe é o projeto de uma casa, ao 
passo que um objeto é a casa em si. E semelhante aos objetos JavaScript, você 
pode construir muitas instâncias da casa a partir de uma única classe (projeto). 


Instâncias do objeto 
> e `x ef 


rd N 
Biog 


Classe do objeto 
A i ni 
/ Blog 


a 

Diversas instâncias 

são criadas a partir 
7 

de uma unica classe, 


L 


Ed 


— 
— 
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As instâncias são criadas a partir das classes Uma classe do 


Uma classe descreve as propriedades e os métodos de um objeto, ao 

passo que uma instância coloca dados reais nas propriedades e dá objeto é um modelo, 
vida a eles. Cada instância tem suas próprias cópias das propriedades, 

que é o que permite que as instâncias sejam diferentes com ao passo que uma 


exclusividade umas das outras. r Lorg "e 
instância do objeto 

é a coisa criada a 

partir do modelo. 


x 


Os valores da propriedade geralmente variam 
A 7 
entre as instancias portanto é importante 
a I 
gee cada instância fenha sva propria copia. 


function () {o 


toString 


toHTML function () Causi 


containsText function (O) 


body | “Met up with some...” 


Os métodos são duplicados date | August 29th, 2008 
desnecessariamente em 


cada uma destas instâncias. toString /function() 


f 
function () 


function() { 
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meça duas vezes... corte uma 


Acesse as propriedades de uma instância com “this” 


Todas as propriedades com as quais lidamos até então, eram propriedades 
da instância, significando que são possuídas por uma instância e o mais 
importante, cada instância tem sua própria cópia. Você pode identificar 
facilmente uma propriedade da instância porque ela é definida no construtor 


usando a palavra-chave this. r 
A palavra-chave this 


é usada para definir 

as propriedades e 

function Blog (body, date) { . - 
BE boas - body; os métodos que são 


ERES. date - date ; í 
fstas são as propriedades da possuldos por uma dos por uma 


| EN ro instância porque são referidas instância. 
usando a paleyra-chave this. 


Existem também métodos da instância, mas são um pouco mais capciosos, uma vez 
que podem ser possuídos por uma instância ou pela classe. Até o momento, apenas 
criamos métodos da instância que são definidos usando a palavra-chave this, que 
significa que são possuídos por cada instância. Isto explica por que o código do 
método é duplicado em cada instância. 


function Blog (body, date) ( 


rd ERES. tostring = function o) « 


Cada instância 


de Bos tens 


e car ii function() ( 
propria cópia 


destes metodos. 


stes são métodos 
da instância arpe 


a palavra-chave 

7 

e usada para defini- 
los no construtor, 


ERES. containsText = function() í 


A boa noúcia é que os objetos personalizados não são destinados a sempre desperdiçar o código 
do método duplicando-o em cada instância nova. A solução é criar métodos de tal modo que as 
instâncias compartilhem uma cópia comum do código do método. 
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Tenha uma vez, execute muitas: os métodos Bina! 
possuídos pela classe possvido pela 


E ` crer E classe Bo 
Há outro tipo de método da instância que é possuído pela própria classe, que Aih do 

A ; s s: oo ni portanto as 
significa que há apenas uma cópia compartilhada por todas as instâncias. Essa 
instância possuída pela classe é muito mais eficiente do que armazenar uma 
cópia de um método em cada e toda instância. 


a mo 

instâncias não 

precisam de suas 
7 4 


proprias copias. 


Aqui o método da 
instância é apenas 
uma referência para o 
método na classe. 


tostring() 
| 


istas instâncias armazenam seus dados nas 

E) 7 
propriedades da instância, mas seus metodos 
são acessados a partir da classe Blog. 


Quando um método é possuído pela classe, todas as instâncias containsText () 


da classe têm acesso a ele e, portanto, não têm suas próprias 


cópias. Isso é muito mais eficiente, especialmente quando Armazen re an método 


vocè considera quantas cópias do método poderia acabar 


ocupando espaço em um aplicativo que cria muitas instâncias R 
do objeto. No caso do YouCube, três métodos (toString ( em uma classe permite 


), toHTML ( ) econtainsText ( )) seriam duplicados H anpi. 
ia a RE que todas as instâncias 


4 
Fana e anas de a neato piei compartilhem uma 
atribuir a propriedade de um método à classe, em oposição às E 

instâncias individuais... cópia. 
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dentro de cada objeto existe... 


Use o protótipo para trabalhar no nível de uma classe 


As classes JavaScript tornam-se possíveis no JavaScript graças a um objeto oculto 
chamado prototype que existe em cada objeto como uma propriedade. O 

objeto prototype permite definir propriedades e métodos que são possuídos 

no nível da classe, em oposição ao interior de uma instância, No caso dos O corpo da 
métodos, o objeto prototype é como você estabelece que uma classe possui função, uma 


um método. literal da função, 
Blog. BESESESES. touTML - function () o qi 


} O nome da função. 


O nome da 


classe, s 
0 objeto prototype 


E acessado como uma 
propriedade da classe. 


Neste exemplo, o método toHTML ( ) é adicionado 
à própria classe Blog, em oposição a uma instância 
específica da classe. Não importa quantas instâncias do 
objeto Blog criamos, há apenas uma cópia do método 
toHTML( ). 


Como o método toHTML ( ) agora faz parte da 
classe Blog, quando o método é chamado, o código 
executado é localizado na classe. Porém, o método é 
tecnicamente ainda um método da instância porque ele 
pode ser chamado através de um objeto de instância e 
pode acessar as propriedades da instância. 


var blogEntryl = new Blog(“Not much going on.”, ...); 


blogEntry1.toHTML (); 


Chamar o método +oHTIALO) leva 
N iy a ser executado na classe, / 


Se outra instância do objeto Blog for criada e o método toHTML ( ) for 
chamado nela, o mesmo código na classe será executado. Esta é a beleza de 
armazenar um método em uma classe — armazene uma vez, execute muitas! 


var blogEntry2 = new Blog(“Still just hanging around.”, ...); 
ás 
blogEntry2. toHTML() ; As outras instâncias ainda 
à 7 
compartilham o mesmo metodo 
na classe, 
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Classes, protótipos e Youlube 


Ruby está um pouco desarmada com toda essa conversa 
sobre classes e protótipos, mas cla tem uma sensação 
muito boa de que o YouCube poderia aproveitar a 
reconsideração do armazenamento do método Blog 
com a ajuda do objeto prototype. 


Opa, usar o objeto prototype 
para armazenar os métodos do 
blog poderia tornar o código 
YouCube muito mais eficiente. 


toString() 


containsText() 


quente seu Lápis 


A O código Blog, agora, usa o objeto prototype para armazenar 


os métodos para que eles sejam possuídos pela classe. Anote o 


código e explique o que está ocorrendo. 
function Blog (body, date) [ 
// Atribua as propriedades 
this.body 
thís.date 


/j Retorne uma representação de string da entrada do blog 
Plog.prototype.toString = functiont ) { 

return “[* + (this.date.getMonth( ) + 1) + “/” + this.date.getDate( ) + “/” + 
this.date.getFullvear( ) + “] “ + this.body; 


!! Retorne uma representação HTML formatada da entrada do blog 
Blog.prototype.toHTML = function (highlight) ( 

!! Use um segundo plano cinza como um destaque, se especificado 

var blogHTML = “”; 

blogHTML += highlight ? “<p style='background-color:+EEEEEE'>” : "<p>"; 


// Gere o código HTML do blog formatado 

blogHTML += “<strong>” + (this.date.getMonth( ) + 1) + “/” + this.date.getDate( ) + “/” + 
this.date.getFullyear( ) + "</streng><br />” + this.body + “</p>”; 

return blogHTML; 


4! Veja se o corpo do blog contém uma string de texto 


Blog.prototype.containsText = function(text) { 


return (this.body.toLowerCase( ).indexOf (text.toLowerCase( j) -1); 
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solução inteligente 


Aponte seu Lápis 
a Solução O código Blog, agora, usa o objeto prototype para 


armazenar os métodos para que eles sejam possuídos pela classe, 
Anote o código e explique o que está ocorrendo. 


function Blog (body, date) ( 


// atribua as propriedades 2 
pd rg Agora, o construtor concembra-se semente 


this.date = date; ma criação e na inicialização das propriedades, 


// Retorne uma representação de string da entrada do blog 
= function( ) { 

+ (this.date.getMonth( ) + 1) + “/” + this.date.getDate( ) + “/” + 

egetFullYear( ) + “J “ + this.body; Como os métodos não esti 


sendo atribuidos a 
determinada instância Blog, 


// Retorne uma resentação HTML formatada da entrada do blog 

E - fonction (highlight) « a atribuição ocorre fora d 
// Use um segundo plano cinza como um destaque, se especificado a i 

var blogHTML = *”; construtor 

blogHTML += highlight ? “<p style='background-color: +EEEEEE'>” : “<p>”; 


return “{ 
this,di 


// Gere o código HTML do blog formatado 
blogHTML += “<strong>” + (this.date.getMonth( ) + 1) + “/” + this.date.getDate( ) + "/” + 


this.date.getFullYear( ) + “</strong><br />” + this.body + “</p>”; “ 
return blogHTNL; [A + 4 
m s Cada método € definido no osjeta prototype, ao invés 
e de vsar a palavra-chave Fhis no construtor Blogt), 
Veja se o co! blog contém uma string de texto 
Sia eo Seye eSEE - function(text) ( 


Case ( ).indexOf (text .toLowerCase( )) != -1); 


Um YouCube mais eficiente 


Agora, o blog YouCube usa os métodos possuídos pela classe para eliminar 

o código desperdiçado, graças ao protótipo do objeto. Não importa quantas 

instâncias Blog são criadas, apenas uma cópia dos métodos é criada, uma 

vez que agora eles residem na classe. O legal é que da perspectiva do script metodos na classe. 
YouCube de usar o objeto Blog, nada mudou. 


As instâncias do 
blog chamando os 


A classe Bios. alert (blog[0]); 


} 


blog[2] . toHTML () ; 


blog[3] .containsText (“cube”) ; 
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= Uma classe é uma descrição de um objeto, ao 
passo que uma instância é um objeto real que 
foi criado com base nessa descrição. 


Uma classe organiza as propriedades e os 
métodos de um objeto, ao passo que uma 
instância coloca dados reais nas propriedades, 
dando aos métodos algo com o qual trabalhar. 


como criar objetos personalizados 


m À palavra-chave this é usada para acessar 
uma instância de dentro de seu próprio 


código. 


O objeto prototype permite que os 
métodos sejam armazenados em uma classe, 
evitando que as instâncias dupliquem o 
código desnecessariamente. 


Não existem 


Perguntas idiotas 


P: Ainda não compreendo muito bem toda a 
situação das classes versus instâncias. Qual 
é o caso? 


R: Aidéia por detrás de uma classe é facilitar a criação e 
a reutilização dos objetos. Você poderia criar objetos únicos 
como literais do objeto o dia inteiro e nunca ter problemas, 
exceto gastar muita energia desnecessariamente. Éum 
desperdício porque você estaria duplicando seus esforços. 
Como um arquiteto que insiste em redesenhar os projetos 
da mesma casa sempre que deseja construí-la de novo. 


Por que não criar um modelo que possa ser usado para 
criar quantas instâncias quiser, resultando em muito menos 
esforço? É onde entram as classes — crie uma classe e, 
então, use-a para criar quantas instâncias forem necessárias. 
P: Tudo bem, então as classes são para 
facilitar criar os objetos que são parecidos 
entre si. Mas qual a relação de this e 
prototype com isso? 


R: Apalavra-chave this permite acessar uma instância 
de dentro de um de seus próprios métodos. Seu uso primário 
é acessar as propriedades da instância. Portanto, se você 
quiser acessar uma propriedade chamada x de dentro de um 
método, informará thi s.x. Se quisesse informar apenas 

x, o código não saberia que estava tentando acessar uma 
propriedade da instância; apenas pensaria que x era uma 
variável. É por isso que os construtores requerem que você 
use this ao criar e inicializar as propriedades. 


prototype é algo diferente. Ele fomece o mecanismo 
para criar as classes. Diferente de algumas outras 
linguagens de programação como, por exemplo, C++ e 
Java, o JavaScript não suporta realmente as classes como 
uma parte concreta da linguagem. Ao contrário, o JavaScript 
usa protótipos para simular as classes. O resultado final 

é parecido, mas o JavaScript requer que você crie as 
“classes” manipulando o objeto protot ype, que aparece 
como uma propriedade “oculta” de cada objeto JavaScript. 
Armazenando uma propriedade ou um método no objeto 


prototype, você toma-o acessível, com eficiência, como 
parte de uma classe, em oposição a apenas parte de uma 
instância. 


P: Como os construtores encaixam-se na 
equação da classe? 


R: os construtores são uma parte muito importante 

do estabelecimento das classes JavaScript porque são 
responsáveis por criar as instâncias do objeto. Você pode 
considerar um construtor e um protótipo como representando 
as duas peças maiores do quebra-cabeça da classe 
JavaScript. Os construtores cuidam da configuração de tudo 
para as instâncias, enquanto que os protótipos lidam com 
tudo no nível da classe. Ambas as entidades trabalhando em 
conjunto fomecem a capacidade de fazer algumas coisas 
muito legais porque existem razões atraentes para posicionar 
alguns membros no nível da instância e outros no nível da 
classe, Continuaremos a explorar esta questão neste capítulo. 


P: Estou um pouco confuso com a 
convenção de nomenclatura usada com os 
objetos. Algumas vezes, um objeto tem letras 
maiúsculas, outras, tem minúsculas. Há 
alguma regra que estou perdendo? 


R: A única regra é que os nomes da classe têm letras 
maiúsculas, enquanto que os nomes da instância têm letras 
minúsculas. É porque uma instância é realmente apenas 
uma variável e os identificadores da variável usam letras 
minúsculas. A inconsistência tem relação, principalmente, 
com o fato de que estamos usando o termo “objeto” bem 
vagamente. Para ser preciso, porém, as classes, como 
Blog, devem ter letras maiúsculas, ao passo que as 
instâncias como blogEnt ry ou blog [0] devem ter 
letras minúsculas CamelCase. 


Essa convenção de nomenclatura fará sentido se você 
lembrar dos outros objetos padrões que usamos. Você 
poderia armazenar a data/hora atuais em uma variável 
(instância) chamada now, que é criada a partir do objeto 
(classe) Date. 
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assine aqui... aqui... e aqui. 


Como assinar o blog 


Ruby está trabalhando na eficiência e nas melhorias organizacionais que a 
programação orientada a objetos ou OOP trouxe para o YouCube, mas ela está 
interessada em fazer mais do que apenas uma melhoria interna no código... ela 
deseja adicionar um recurso novo. 


Blog for Cube Puzzlers: © = (=) 
— RE SD ha 
Eu realmente gostaria de criar - The Blog for Cube Puzzlers 
uma assinatura que apareça 
abaixo de cada entrada do blog. 
exatamente aqui! 


Search the Blog aaa EA 


rig with some fellow cubers to discuss the prospect of a 7x7x7 cube. Mixed 
feelings. 


ad a 71X] cube for sale online. Yikes! That one could be a beast. ef 


the new cube but of course, now Tm bored and shopping for a new one. 


End to get a headache toiling over the new cube. Gotta nap. 


a W cube T ordered. Its à real pearl: 


Ruby calcula que adicionar uma propriedade signature 
à classe Blog possa fazer o serviço. Então, ela poderá 
simplesmente definir a propriedade no construtor e exibi- 
la com cada entrada do blog... problema resolvido! 


Poder do 
cérebro 


Ruby deve criar a assinatura como uma propriedade da instância? Você pode imaginar alguma 


razão para isso não ser uma boa idéia? 
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Não existem 
Perguntas Ídiotas 


P: Continuo vendo o termo orientado a objetos. 
O que significa? 


R: O termo orientado a objetos é muito usado (e 
abusado), terrivelmente, nos círculos da programação e pode 
significar coisas diferentes para pessoas diferentes. Em geral, 
a programação orientada a objetos (OOP) envolve construir 
um software dos objetos como, por exemplo, o modo como 


A maioria dos programadores associa a OOP com o uso 
dos objetos em todo um programa. Pelo menos na teoria, o 
verdadeiro programa orientado a objetos pode ser dividido em 
uma coleção de objetos que interagem entre si. Existem puristas 
orientados a objetos que argumentarão que o JavaScript não 
se qualifica como uma linguagem OOP. Economize energia 
e tente evitar esse debate. Existem argumentos válidos em 
ambos os lados, mas no final do dia, ninguém vence. 


o objeto Date é usado na propriedade date das entradas 
do blog YouCube. 


Espere um minuto. Ruby não tem 
apenas uma assinatura? Se for assim, 
porque cada instância precisa de sua 
própria propriedade signature? 


A assinatura 
1 

€ igval para 
Hodas as 


embradas do ma. o. eras é 
-Monaged to get aheaa i e 
blog, Cube, ` = Meadache toäng over he ney 


Talvez uma assinatura seja suficiente. 


Sabendo que a assinatura do blog é igual para todas as instâncias, não 
há nenhuma necessidade de cada instância ter sua própria propriedade 
signature. O que Ruby precisa é de uma propriedade da classe, uma 

propriedade onde há apenas uma cópia que é armazenada na classe, ao 
invés de uma cópia diferente em cada instância individual. 


A propriedade signature deve 


ser armazenada na classe beso A 


não em cada instância do blog. 
você está aqui» 461 


armazene uma vez, acesse muitas 


As propriedades da classe são compartilhadas também 


As propriedades da classe são muito parecidas com os métodos de instância 
possuídos pela classe no sentido de que eles são possuídos pela classe com uma 
única cópia disponível para todas as instâncias. Em algumas maneiras, isso é 
mais importante para os dados, pois significa que a propriedade tem apenas um rt 
valor que é compartilhado por todas as instâncias. Isso é exatamente o que Ruby «â ins fância, 
está procurando para a nova propriedade signature porque há apenas uma 
assinatura para o blog YouCube inteiro. 


ada instância 
armazena 
suas proprias 
propriedades 


Se você mudar a 
propriedade signature 

do Blog, ela mudará a 
propriedade para Hadas as 
instâncias. 


Se você mudar 


apropriedade 
a desta 
rada do blog; A propriedade aa, 

não afetará classe signature é Se você mudar a 
nenhuma outra armazenada apenas na propriedade date 
entrada. classe, desta entrada 

é do blog, a mudança 
Uma propriedade da apenas afetará esta 

imrbrada, 
classe é armazenada uma find 
vez em uma classe, mas Mesmo que a propriedade Enero seja 
ERA armazenada na classe Blog, ela estará prontamente 
acessível para todas as acessível para qualquer instância que deseja acessar 
a assinatura do autor do blog. 

instâncias. 


PM tera do 
cérebro 


Como você acha que poderia criar uma propriedade da classe? 
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Como criar as propriedades da classe com prototype 


Para toda a conversa sobre onde uma propriedade da classe é armazenada e o 
impacto geral que tem na vida como sabemos, criar uma propriedade da classe é 
surpreendentemente comum. Na verdade, uma única linha de código é requerida: 


A propriedade da classe é 
acessada usando a notação 
A classe Blog À >A Gomto) do objeto. 
é especificada Bloo. BESESENDE. signature = “Puzzler Ruby”; 
primeiro, então o ig 


As propriedades da 
objeto prototype. À 
\ 


does 
classe não bem gue ser 


inicialigadas, mas neste 
Provavelmemte você adivinhou, o objeto "aik 


H n | casa fas sertido porque 
prototype € onde as propriedades da classe são `a aufana do blog j é 
armazenadas, conhecida. 


Uma das coisas mais interessantes sobre este código é o que você não pode 
perceber totalmente vendo-o por si só — o código não aparece dentro de um 
construtor, como o código que cria as propriedades da instância. A razão é que os 
construtores são usados para dar vida às instâncias e, portanto, não são capazes de 


criar as propriedades da classe. Ao contrário, as propriedades da classe devem ser 
criadas fora do construtor. 


Propriedades da instância 


function Blog(body, date) { 
this.body = body: 
this.date = date; 


gnature = “Puzzler Ruby 
A 


As propriedades da Uma cópia da 

classe são criadas assinatura A 

Lora do construtor para todas as As propriedades a mi a à 
de um objeto com um emtradas do blog. \ da instância são e a i; i TA 
pouco de ajuda do objeto criadas dembro COPRA BAR EARTE 
prototype ocutto, oaasi her 


de um objeto, 


aponte seu Lápis 


Escreva um código para exibir a propriedade signature 
em uma caixa de alerta. Sugestão: Suponha que o código esteja 
localizado dentro de um método Blog. 
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solução inteligente 


aque seu Lápis 


à Solução 


P: Por que você precisa 
armazenar a assinatura 
YouCube em uma 
propriedade? Ela não poderia 
ser fornecida como parte 

do texto do corpo para cada 
entrada? 


R: Certamente, é possivel incluir 
uma assinatura em cada entrada do 
blog como parte do texto do corpo, 
mas isso requer tempo e esforço 
desnecessários, supondo que há 
apenas uma pessoa enviando 

para o blog. Ficaria cansativo para 
Ruby assinar cada entrada do blog 
quando há uma maneira mais clara 
de lidar com a assinatura usando 

o JavaScript. E quem sabe se ela 
poderia digitar errado, sem querer, e 
tomar-se “Puzzled Ruby"? Não é bom! 


Outra opção que é mais viável é 
simplesmente usar uma literal de 
string para a assinatura ao formatar 
uma entrada do blog como HTML. 
Essa abordagem funciona bem, mas 
esconde uma parte importante dos 
dados, a assinatura, no código de 
formatação do blog, onde é difícil 

de encontrar e manter. Colocando a 
assinatura em uma propriedade da 
classe, você irá tomá-la facilmente 
acessível e, portanto, muito mais fácil 
para o blogger identificar e alterar. 


P: Como mudaria criar 
uma entrada do blog se 
a assinatura fosse uma 
propriedade da instância? 


R: Lembre-se de que cada instância 
de um objeto tem seu próprio conjunto 
de propriedades da instância que 
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Não existem 
Perguntas Ídiotas 


são inicializadas no construtor. Se 

a propriedade da assinatura fosse 
uma propriedade da instância, o 
construtor BLog ( ) precisaria 
defini-la em cada e toda instância. 
Isso não seria necessariamente uma 
grande confusão na codificação, 

uma vez que o construtor poderia 
definir a propriedade para a string 

de assinatura. Porém, internamente, 
haveria tantas cópias da assinatura 
quanto instâncias e isso seria um 
grande desperdício. Não apenas isso, 
mas seria possível mudar a assinatura 
para as diferentes instâncias 
independentemente das outras. 


E E se eu quisesse modificar 
o YouCube para suportar 
diversos bloggers, eu mudaria 
a assinatura para uma 
propriedade da instância? 


; Sim e isso seria uma boa 
idéia porque em uma situação com 
diversos bloggers, a propriedade 
signature tem a possibilidade de 
precisar manter diferentes valores 
para cada instância. A melhor maneira 
de lidar com isso provavelmente seria 
adicionar um argumento ao construtor 
Blog( ) que permite que a string 
da assinatura seja transmitida. 
Então, use essa string para 
inicializar a propriedade da instância 
signature. Em outras palavras, 
lide com a propriedade signature 
exatamente como as outras 
propriedades da instância Blog. 


Escreva um código para exibir a propriedade signature 
em uma caixa de alerta. Sugestão: Suponha que o código esteja 
localizado dentro de um método Blog. 


As propriedades da classe são 
acessadas como as propriedades da 
instância, usando a palavra-chave bhis! 


1 


P: As propriedades da 
classe parecem funcionar 
como as variáveis globais. 
Como são diferentes? 


R; As propriedades da classe 

são, de fato, muito parecidas com 

as variáveis globais, uma vez que 
podem ser acessadas de praticamente 
qualquer lugar. As propriedades da 
classe também são criadas de iriodo 
semelhante às variáveis globais, 

pelo menos em termos de onde são 
criadas — a partir do nível do script 
principal, fora de outro código. Onde 
as propriedades da classe diferem das 
variáveis globais é em sua associação 
com uma classe e, portanto, com os 
objetos da instância. Isso significa que 
você sempre tem que acessar uma 
propriedade da classe em relação a 
uma instância. 


P: Espere. As propriedades 
da classe têm que ser 
acessadas através de uma 
instância? 


R: Mesmo que as propriedades 

da classe sejam criadas usando 

o objeto prototype, que os 
armazena em uma classe, elas têm 
que ser acessadas através das 
instâncias. Portanto, uma propriedade 
da classe é acessada exatamente 
como uma propriedade da instância, 
usando a palavra-chave this 

e a notação (ponto) do objeto. A 
diferença é realmente apenas onde 

a propriedade é armazenada — na 
classe (propriedade da classe) ou em 
uma instância especifica (propriedade 
da instância). 


como criar objetos personalizados 


Assinado e enviado Gaili 


Com a propriedade da classe signature criada, inicializada e pronta para usar, LolTAALC 3, 
Ruby está pronta para vê-la em ação. Vendo o código que formata uma entrada do agora, formata a 
blog para exibir em um navegador, o método toHTML ( ) é onde a assinatura assinatura como 
entra na apresentação de cada entrada do blog. parte de uma 
emtrada do blog. 


function (highlight) | 


„prototype. toHTML = o 
EIEE ` destaque, se especificado 


s; Use um segundo plano cinza como um 
var blogHTML = “5 na 
blogHTML += highlight ? “<p style=’ background-color: PEBREBE*>" + "<P ) 


j4 Gare o código HTML do blog formatado persa coma baien / 
blogHTML += “<strong>” + (chis date germontn o) + 1) + 447 + ehia-da e.ge! sã x ; 
3 z sebr /><em>” + this.signature 
das canas gecrullfoast)) + 7</atronga<as j>” + chis.body + “<br />< ré 
as .date.getFul f 


“</em></p>"; 
return blogHTML; 


A propriedade da classe 
signature é referida 
exatamente como uma 
propriedade da instância 


A assinatura de Ruby aparece como 
parte de cada emtrada do blog, 


Agora, não há nenhum 


istério sobi 
A Ei rara normal, 
7 entrada do blog. 
ent ahead and ordered 
e the scary 7x7x7 cube. Starting a mental exercise 
by Puzzler Ruby 1 
ilangan 
tup with sor i 
pe E : me fellow cubers to discuss the Prospect of a 7x7x7 cube ip: 
by Puzzler Ruby y 
8/21/2008 


Found a 7x7x7 cube i 
by Puzder hapy e POr sale online. Yikes! That one coulaf 


8/19/2008 


Solved the new cube but of course, ) 
by Puzzler Ruby ut of + now I'm bored and shopping for a new one. 


Ruby usou as técnicas OOP para estender mais a linguagem 
JavaScript adicionando uma propriedade da classe de assinatura à 
classe Blog. O mais importante, ela conseguiu acrescentar um toque 
mais pessoal ao blog YouCube. 
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propriedade da instância versus propriedade da classe 


Conversa desta noite: As propriedades 
da instância e da classe conversam 
sobre a propriedade dos dados e as 


Conversa informal 


Propriedade da instância: 


Então, você é o outro cara sobre quem ouvi 


falar. Tenho que dizer que não vejo por que você 
está aqui. Faço um trabalho excelente ao permitir 


que as instâncias do objeto sejam únicas e 
controlem seus próprios valores da propriedade. 


Agora, isso é dificil de acreditar. Continue... 


Então, você está dizendo que eu não seria 
melhor maneira de armazenar um cumprimento 
secreto? 


Compreendo. Mas e a senha secreta? Posso 
armazenar isso? 


Impressionante! Então, comecemos. Estou 
iniciando um clube secreto e nós duas estamos 
tendo nossas próprias senhas. 


Boa! Então, o que é? Realmente. Estou curiosa... 
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Propriedade da classe: 


Tenho certeza que sim e é algo admirável. Mas 
você sabia que algumas vezes as instâncias não 
desejam a chatice de acompanhar seus próprios 
dados? 


Bem, há situações em que uma parte dos dados 
é comum a todas as instâncias, um tipo de clube 
secreto que tem um cumprimento secreto. 

Cada pessoa no clube conhece o cumprimento 
secreto, mas é um cumprimento de todo o clube, 
Se alguma moça no clube inventar seu próprio 
cumprimento secreto, irá alterar tudo. Então, 
alguma outra moça terá que cobrir isso com seu 
cumprimento e antes que você perceba, ninguém 
mais saberá o cumprimento secreto porque há 
muitos deles. 


É isso aí. Sem ofensas, mas neste caso, 

os membros do clube só precisam de um 
cumprimento, mesmo que todas as pessoas 
precisam conhecê-lo. 


Talvez. Se cada pessoa tiver sua própria senha 
secreta que seja pessoal, então sim, seria 
excelente para você armazenar as senhas 
secretas, 


Mas você não conhece o cumprimento secreto. 
te peguei! 


como criar objetos personalizados 


O código duplicado é inaceitável 


Ruby está nisso de novo. Como ninguém descansa sob: 

os louros, ela decidiu ir além ao melhorar a pr 

rey YouCube, Ela descobriu um código de ço 
la data duplicado que está convencida de que pode pa 


eliminado de algum mod: is 
princípios OR lo com uma aplicação esperta dos 


Este código parece est 
duplicado a E 


Como posso retirá-lo? 


<html> 
<head> 
eitle>Youcube - The Blog for Cube puzzlers</title> 


<script types"text/Javascript'> 
71 Construtor de objetos do blog 
function Plog (body, date) I 
74 atribua as propriedades 
this.body - body || "Nothing going on today.” 
this date = date || new Datel ); 
, 


|| Retorne uma representação de string da entrada do blo 
Blog.prototyps q = 


actioni À 


Este codi 

É ba 

Ji Retorne uma representação HTML formatada da entrada do DloS gl é Fa de formatação da 

Blog. prototype.toRTML = function (highlight) ( lata € iderbico e, portamto, 
9) Use um segundo plano cinza como um destaque, se especificado Um pegueno Z 3 
Do oe = SERF pequena desperdic 
blogHTML += highlight ? “<p style=’ background-color :#EEEEEE" >" + “<p>”: 


ji Gere o código HTML do b 
Es EA 


Zhis.date.get! 


“</em></p>”; 
return blogHTML; 


Ji veja se o corpo do blog contém voa string de texto 
Blog.prototype.containsText = function(text) | 
in (this body.indexof (text) != -1); 


i 


ji Defina a assinatura de todo o blog 
Blog.prototype. signature = “bY Puzzler Ruby”; 


Poder do 
cérebro 


Como você poderia elimi 
minar o código d 
formatação da data duplicado no VouCubs? à 
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onde formatar 


Um método de formatação de datas 


Ruby acha que uma solução apropriada para o código de formatação da data 
duplicado é adicionar um método de formatação da data ao objeto Blog. Para 
reutilizar o código, ele deve ser colocado em uma função ou em um método e 
ela poderia também combinar com um método, uma vez que o objeto Blog é 
responsável por formatar as datas como parte da formatação de uma entrada do 
blog. Deveria? 


Se formatar uma data é realmente um 
comportamento do objeto Date, faria mais 
sentido para o método ser um método Date? 
Há alguma maneira de adicionar um método 
a um objeto JavaScript padrão? 


De volta ao objeto prototype 


O que poderia ser mais poderoso do que pegar um objeto 
preexistente e torná-lo ainda melhor? Como resultado, há um 
modo de modificar um objeto padrão e acaba fornecendo a 
opção perfeita em termos de estender a linguagem JavaScript. 

O segredo para estender os objetos padrões ou qualquer objeto 
JavaScript para tanto, é o objeto prototype. Já usamos 

o objeto prototype para estender a classe Blog com as 
propriedades da classe e os métodos possuídos pela classe. Nada 
nos impede de fazer o mesmo tipo de extensão para as classes 
JavaScript predefinidas. 


Qualgver objeto 
SE VR antigo, ale vm objeto 
Uavase ript padrão, 
Todo objeto Hem um objero 
prototype qe permi 
adicionar propriedades € 
métodos no mivel da classe. 
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Como estender os objetos padrões O objeto 
O segredo para estender um objeto está no objeto prototype e todo prototype permite 


objeto no JavaScript tem um. Portanto, você pode estender qualquer 

objeto adicionando propriedades e métodos a seu objeto prototyps, estender os 

que estabelece as propriedades da classe e os métodos possuídos pela 

classe. No caso de um objeto JavaScript predefinido, adicionar uma objetos JavaScript 
propriedade ou um método ao seu objeto prototype significa que Ê 

qualquer instância nova do objeto predefinido terá acesso à propriedade predefinidos. 


ou ao método. 


String 


Adicionar um método 
ao protótipo de um 
objeto predefinido 

oloca o método na 
classe do objeto. 


Os novos objetos criados a partir da 
Ro Ts classe podem, então, usar o método. 
Crie o método como um membro do objeto 


erion protege de String, 


EA 


ji Retorne a string misturada string 


Usar o novo método String é apenas uma 
questão de chamá-lo em uma instância do objeto 
String. 


alert (this.signature.scramble ()); 


luzPrb q zyRe 


efiponte seu Lápis 


Escreva o código para um método chamado shortFormat ( 
) que seja uma extensão para o objeto Date padrão e cujo 
trabalho seja formatar uma data como MM/DD/ AAAA. 
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solução inteligente 


Aponte seu Lápis 
A Solução Escreva o código para um método chamado short Format ( 


) que seja uma extensão para o objeto Date padrão e cujo 
Dm trabalho seja formatar uma data como MM/DD/AAAA. 
método € 


adicionado p, 


ao 
protótipo, 
do objeto i 
e NO e.. 


Objeto Date personalizado = YouCube melhor 


O objeto Date personalizado torna o YouCube mais eficiente e 
estende os recursos do objeto predefinido. O YouCube também 
fica mais fácil de manter uma vez que o formato da data, agora, 
pode ser alterado em um local, porém afeta a aparência das datas 
em todo o blog. Certamente, as melhorias OOP no código do script 
nem sempre apresentam um toque imediato na forma de mudanças 
visuais, mas em geral resultam no código que simplesmente parece 
funcionar melhor a longa distância. 


stopped carrying cube puzzles. 
dade a rally outside of a local toy store fat 


Power to the puzzlers! 
by Puzzler Ruby 
NOS oder te soary 737 cube Suring a men reS 
regimen to 
x , Mixed 
7 cube. 
is the prospect of a 7x7x 
il fellow cubers to discuss 
Met up with some 
feelings. 
As data by Puzzler Ruby 
greer i i could be a beast. 
era as Bound a 7x7x7 cube for sale online- Yikes! That one 
formatades py Puzzler Ruby 
usanda um ” 
ms for a new one. 


personalizado soos. new cube but of course, 


do objeto Puzzler Ruby 
Dede. by 
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Uma classe pode ter seu próprio método 


O método shortFormat ( ) personalizado do objeto Date z. 
é um método da instância possuído pela classe, significando Os métodos da classe 
que tem acesso às propriedades da instância, mesmo que seja são possuídos por uma 


possuído pela classe, É isso que permite ao método formatar 


a data armazenada em uma determinada instância. Também classe e podem acessar 
é possível criar um método da classe, que é um método 


possuído por uma classe que não pode acessar as propriedades apenas ag propriedades 
da instância. Porém, os métodos da classe podem acessar as 

propriedades da classe como, por exemplo, a propriedade da classe. 

signature na classe Blog. 


ir 
Biog Classe Rico 


p— 


showSignature () 


EE? 


étodos da classe podem = 
Os método Os métodos da classe não podem 


s propriedades da ó 
sus ae acessar as propriedades da instancia b 
id ou os metodos. Instância 
Criar um método da classe é uma questão de definir o método para a classe Para acessar vma 
sem usar o objeto prototype — apenas atribua o método à classe usando o propriedade da 
nome da classe e a notação do objeto. classe apa ntin de 


um método da classe, 


Eloglsnonsigaaturo - fonction) í você Fem se extrair 
alert (“This blog created by “ + my; A prepriedade 
A A prototype. 
Como a assinatura € uma propriedade da 
classe, o método da classe Fem acesso a ela, 


Como os métodos da classe não têm nenhuma associação a uma instância, você 
os chama fazendo uma referência apenas ao nome da classe. Isso não significa que 
uma instância não pode chamar um método da classe, apenas tem que fazer isso 
usando o nome da classe. 


Blog. showSignature () ; Poder do 
/ cérebro 
O nome da classe e a 


chave para chamar um Você pode pensar em algum código no YouCube que faria 
metido da classe, sentido como um método da classe de Blog? 
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de volta à classe Blog 


Um método da classe 
poderia ser usado para a 
função de comparação de 
classificação do blog? 


Got the new 7x7x7 cube. Could dbe my! lastb 
Post for a white. = y 


09/03/2003 Á 
= IR falocaltoystore? at zat 
3 localtoy store 


| stoppedo anying c c be pu puzles. Power tothe p! zz'ers! 


09/0: 
Went ahead and ordered the scary 7x7x7 cwe. 
Starting a mental exercise regimen to prepare, pr 


4 
A w 


A S Como repensar o classificador de blogs 


Esta é uma idéia intrigante porque a função de comparação da 
A classificação do blog é classificação está, definitivamente, desempenhando um papel que é 
lidada dembro da Função específico do objeto Blog. Atualmente, essa função é criada como 
uma literal da função dentro da função showBlog ( ), que é onde 


showblost), 3, que não é uma a 
é necessária. 


parte do ofjeto Blog. 


function showBlog (numêntries) ( 


77 Primeiro,classifique o blog na ordem cronológica inversa (o mais recente primeiro) 


Poderia ser possivel mover à código de comparação 

da classificação para um método da classe. 
Um dos conceitos fundamentais da OOP é encapsular a funcionalidade de 
um objeto dentro do próprio objeto, significando que o código externo não 
deve estar fazendo o trabalho que um objeto pode fazer para si mesmo. Neste 
caso, a comparação das entradas do blog para classificar pode ser feita dentro 
do objeto, ao invés da função showBlog ( ). Mas o código de comparação 
da classificação pode ser colocado em um método da classe da classe Blog? 
Para responder a esta pergunta, temos que descobrir se o método requer 
acesso aos dados ou aos métodos da instância. Isso seria um grande problema, 
uma vez que os métodos da classe não podem acessar nada em uma instância, 
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Examine a função de comparação da classificação 


O único modo de saber se isso funcionará é decompor a função e ver o que está 
acontecendo. Esta é a literal da função de comparação da classificação com o 
código formatado mais como uma função normal: 


E Ra Da ces Duas instâncias do blog são transmitidas 
function (blogl, blog2) { paraa função como argumentos, 


return blog2.date - bloal.date; 
y KR A comparação da classific 
uma subtração dos dois argumentos, 


ção envolve 


Embora a função lide diretamente com as instâncias do blog, elas são transmitidas como 
argumentos. Isso é diferente de tentar acessar uma propriedade ou um método dentro 
de uma instância através da palavra-chave this, o que não é possível em um método da 
classe. Portanto, a função de comparação da classificação não precisa acessar nada dentro 
de uma instância, o que a torna uma candidata perfeita para um método da classe. 


Na verdade, a função de comparação da classificação nem mesmo requer as propriedades 
da classe, embora pudesse requerer se necessário, pois os métodos da classe têm acesso às Ty sfancia 


propriedades da classe. 
Blog 


z 1 
Um metodo da classe podera 
acessar uma propriedade da 
classe se precisar, 


À função de comparação 
da classificação não | 
I precisa acessar os dados N 
da instância ou da classe, 


tê; a função de 
N $! 


comparação da 
classificação +ivesse 
prectsado acessar uma 
instância, não seria 
passível Manaka um 
método da classe. 


É 
date - blogl.date; 


function (blogl, blog2) 


return bloa2. 


Reescreva a função de comparação da classificação do blog 
YouCube como um método da classe do objeto Blog que é 
denominado blogSorter ( ). 
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método da classe? para iá! 


Aponte seu Lápis 
A Solução 


Reescreva a função de comparação da classificação do blog 
YouCube como um método da classe do objeto Blog que é 
denominado blogSorter( ). 


E ta 


~ ai, Z 
de comparação da classificação €, agora, um m 


ado da classe do objeto Blog 
chamado blog Sortert), 


Como chamar um método da classe 


A vantagem de mover a função de comparação da classificação do blog para um 
método Blog fica um pouco mais fácil de avaliar quando você vê o código que 
chama o método. 


function showBlog (numêntries) ( 


/I Primeiro, classifique o blog Os detalhes de classificar o blog, agora, 
blog. sort(Blog-blossorter); são delegados as metodo da classe 
A blag SontenC) da classe Blog. 

} 

A beleza deste código é sutil, mas importante. À função showBlog ( ) não tem 

mais que se preocupar com o modo de como as entradas do blog são classificadas. 

Ao contrário, os detalhes de como as entradas do blog são classificadas são lidados 

dentro da classe Blog, a qual ela pertence logicamente. 


O que é ótimo é como a classificação é iniciada ainda fora da classe Blog na 
função showBlog ( ),o que faz sentido porque a classificação afeta uma coleção 
inteira de instâncias do blog. Mas, as particularidades de como a classificação é 
executada em relação às entradas individuais do blog estão dentro do domínio de 
algo com o qual a classe Blog pode lidar. Uma boa construção OOP geralmente 
envolve uma organização cuidadosa dos objetos e de seu código vizinho. 


ER ii) E 
v 


mw Blost Jusa o método da 
Ler) para classificar as 


Blog 


A função shoi 


showBlog() classe blogSor 
entradas do blog. 
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Uma imagem vale mais que mil palavras” 


Ruby continua a vibrar com as melhorias OOP para o YouCube, mas também sabe 
que os usuários não compartilharão, necessariamente, de seu entusiasmo porque 

os aperfeiçoamentos OOP têm ainda que impactar muito a experiência do usuário, 
Portanto, ela decidiu que é hora de acrescentar um toque ao blog! a 


O YouCube é ótimo, mas algumas vezes 
tenho imagens que gostaria de compartilhar. 
Seria realmente legal adicionar uma imagem 
a alguns envios do blog. Você sabe, deixar a 
carne mais no ponto! 


A idéia de Ruby é permitir que cada entrada individual 
do blog suporte uma imagem opcional que seja exibida 
junto com a data e o texto do corpo. Como nem todas as 
entradas do blog requerem imagens, é importante que a 
imagem seja opcional. Isso também evita que as entradas 
existentes do blog, que ela já escreveu, sejam danificadas. 


J Poder do 
cérebro 


Você poderia alterar o objeto Blog no 
YouCube para suportar imagens? 


você está aqui» 475 


a imagem é tudo 


Como incorporar imagens no YouCube 


Adicionar o suporte de imagem ao blog YouCube envolve descobrir como 
incorporar uma imagem no objeto Blog de tal modo que não interfira no modo 
como o objeto já funciona. Isso levanta duas questões importantes que conduzirão 
a construção: 


Qual é a melhor maneira de Como a imagem do blog 

armazenar uma imagem do pode ser adicionada ao 

blog dentro do objeto Blog? YouCube, mas permanecer 
7 inteiramente opcional? 


Independentemente de como uma imagem do blog é armazenada, sabemos que 
no final das contas será fornecida em uma tag <img> HTML para que possa ser 
exibida na página Web YouCube. 


4 P 
Uma imagem do blog € descrita o 
mma» ~ sviene usando um nome de arquivo 
<img src= Aae f > 

da string, 
Este código informa que, no que diz respeito ao blog, uma imagem é realmente 
apenas uma string. Certamente, a string, no final, refere-se a um arquivo de imagem 
armazenado em algum lugar em um servidor Web, mas da perspectiva do objeto 
Blog, é apenas uma string, 


No que diz respeito ao 
objeto Blog, uma imagem 
é apenas uma string. 


Portanto, uma imagem poderia ser adicionada ao objeto Blog 
simplesmente como uma propriedade que armazena uma string, 
parecido com a propriedade body. 


(mf cube777.png Blog 


A imagem As propriedades 

do cubo com body e image são - 
7=7=7¢ armazenadas no toStritgl 
armazenada objeta Blog como 

no argvivo strings. 

denominado 


cube 77 png. 


containsText () 
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Uma imagem do blog opcional 


Então, a imagem do blog é armazenada no objeto Blog como uma 
(2) propriedade de string denominada image, mas a pergunta ainda 
permanece como essa propriedade pode ser adicionada ao blog 
como um recurso puramente opcional. Esta pergunta, basicamente, 
tem que levar de volta ao construtor, que é onde o objeto é criado 
e inicializado. Certamente, algum código especial tem que ser 
colocado no construtor para lidar com o fato de que a propriedade 
é opcional. 


Não estou certo sobre isso. 
O que acontecerá se você não 
transmitir um argumento para um 
construtor? A propriedade não será 
simplesmente definida para null? 


function Elog (body, date) t 


Ji atribua as propriedades 


this.body = body; 


= date; 


this.date 


Os argumentos da função ausentes tornam-se nulos. 


Quando um argumento não é transmitido para uma função, método ou 
construtor, ele assume um valor null em qualquer código que tenta 
usá-lo. E no caso de um construtor especificamente, isso significa que a 
propriedade associada a um argumento ausente é definida para null, o 
que não é necessariamente algo ruim. O truque real é, então, assegurar que 
o argumento opcional do construtor seja especificado no final da lista de 
argumentos para que possa ser retirado sem danificar os outros argumentos. 
Essa técnica, de fato, funciona para qualquer função ou método, mas é 
particularmente útil para o argumento image do construtor Blog ( ). 


aporto seu Lápis 


Reescreva o construtor Blog ( ) do YouCube para suportar 
a uma nova propriedade da imagem para armazenar uma imagem de 
entrada do blog. 
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solução inteligente 


Aponte seu Lápis 
~o =. Reescrevao construtor Blog ( ) do YouCube para suportar 
Solução 


uma nova propriedade da imagem para armazenar uma imagem de 
entrada do blog. 


A propriedade Uma rsumento 
maço AME EE E E aa mage C Pa 
adicionada € coma o dl a 
inicializada para dñjómenha as 

o argumento construtor. 


image, 


Não existem Como adicionar imagens ao YouGube 


O construtor Blog ( ) novo e brilhante com suporte para as 
imagens não seria muito útil sem algumas entradas do blog que 
o utilizam. Para criar uma entrada do blog que suporta imagens, 


Perguntas Ídiotas 


duas coisas devem ocorrer: 


P: É importante que o argumento 
image apareça por último na lista de 


argumentos do construtor Blog ( )? o Coloque o arquivo 
R: Sim, e a razão é que a imagem é de imagem do blog 
perre =o jo maaga na mesma pasta do 
você irá transmitir os argumentos para as servidor Web como a 
funções, especialmente quando pertencem aos página Web YouCube. 


argumentos opcionais. Se uma função tiver dois 
argumentos, você terá a opção de transmitir 
ambos os argumentos, transmitir apenas o 


primeiro argumento ou transmitir nenhum deles. cube777.png 
Não há nenhum modo de transmitir apenas o (2) Crie a nova entrada do 
segundo argumento. blog como um objeto Biog 


Então, para os argumentos opcionais, fo Blog no código do 
considere-os como sendo capaz de retirá- script YouCube. 

los do final da lista de argumentos. Também 

tente considerar os argumentos em termos 

de importância, com os argumentos mais o o 
importantes aparecendo primeiro. Os ONhitaoos 


Elog( ) é opcional, ele deve aparecer por 
último na lista de argumentos onde pode ser 
retirado facilmente. 
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Completar estas etapas resultará no seguinte código, que cria com sucesso 
uma nova entrada do blog que transmite uma string de imagem no último 
argumento do construtor Blog( ): 


new Blog(“Wow, it took me a couple of weeks but the new cube is finally solved!”, 


new Date ("09/19/2008"), SESBERNEASA 
A imagem do blog é transmitida no último 
argumento do construtor Blog BA 


Como exibir a imagem do blog 


Agora que uma entrada do blog foi criada com 
uma imagem, há uma última parte do negócio 
para a melhoria da imagem no YouCube. Toda 
essa conversa de construtores e argumentos a logica deste pseudocádi o, 
opcionais não significaria muito se o código 

que exibe uma entrada do blog, de fato, não se 

dividisse na nova propriedade image. 


Este código está localizado no método 

toHTML( ). Já sabemos que esse método 

é responsável por formatar o blog como o Exiba a entrada do blog com a imagem 
código HTML, exceto agora que ele tem que 
levar em conta se a propriedade image tem ou 
não um valor significativo. O que realmente 
está ocorrendo é que existem duas maneiras 
diferentes de exibir uma entrada do blog, uma Exiba a entrada do blog sem imagem 
com uma imagem e outra sem, ¢ a existência de 

uma imagem é o que determina de qual maneira 

o blog é exibido. 


eopporto seu Lápis 


Uma entrada do blog deve, 
agora, ser exibida segunda 


H (imagem existir) 


Else 


O método toHTML ( ) do objeto Blog não tem uma parte 
do código que permitirá às imagens opcionais serem exibidas. 
Escreva a parte do código que falta e anote o que ela faz. 


blogRTML += “<strong>” + this.date.shortFormat( ) + 


“</strong><br /><table><tr><td><img src=" + this.image + 
wr j></td><td style='vertical-align:top'>” + this.body + “</td></tr></table><em>" + 
this.signature + “</em></p>”; 


) 


else { 
blogHTML += “<strong>” + this.date.shortFormat ( ) + “</strong><br />” + this.body + 


“<br /><em>” + this.signature + “</em></p>”; 
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O método toHTML ( ) do objeto Blog não tem uma parte 
do código que permitirá às imagens opcionais serem exibidas. 
Escreva a parte do código que falta e anote o que ela faz. 


Aponte seu Lápis 


Pa Solução 


Se a propriedade image for definida para 
uma imagem real, a condição de Feste if será 
avaliada coma Hve ea a será exibida. 


blogHTML += “<strong>” + this.date.shortFormat( ) + 
*</strong><br /><table><tr><td><img src='" + MSNS + go 


rtical-align:top'>” + this.body + “</td></tr></table><em>” + 


= /><jtd><td styles 


this.signature + “</em></p>”; 


} 4 4 
/—— Do comtbrário, a entrada do blog será mostrada como normal sem imagem, 


else t y 


blogHTML += “<strong>” + this.date.shortFormat( ) + “</strong><br />” + this.body + 


“<br /><em>” + this.signature + "</em></p>"; 


Um YouCube acionado por objetos 


Ruby está em êxtase. Seu blog cresceu com grande velocidade graças aos 
objetos e agora, exibe um recurso de imagem novo e agradável que ela sabe 
que seus visitantes irão adorar. 


Sei... está lindo. 


soe YouCube - The Blog for Cube Puzzlers 
YouCube - - The Blog for Cube Puzzlers 


m o o eme 


E E hr took me a couple of weeks but the new cube is finally ) 


by Puzzler Ruby 
Uma 
entrada O hew 7X7X7 cube. Could be my last blog post for a while... 
do bl by Puzzler Ruby 

sp i azes. 

com uma ri ly ouside of a loca toy oe ed camino aba PE b 
ja Powerto the É 
imagem. by Puzzler Ruby 


Done 


480 Capitulo 10 


como criar objetos personalizados 


E ooon M 


Dobre a página 

na vertical para O que os objetos adicionam 
alinhar os dois 

cérebros e resolver à maioria dos scripts? 

a charada. 


A imagem 
que falta 


Os objetos adicionam tantas coisas 
legais aos soriga que pe ser difícil 
escolher uma. É verdade, alguns 

objetos são “fora de classe” 
aos outros e fica ainda mais difícil, mas 
no final a resposta é clara. 
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11 acabe com os erros completamente x 


X Os bons scripts erraram 


Você nunca sabe como lidar com estas 
coisas. Um dia tudo funciona muito bem, 
todos estão felizes... no dia seguinte, 
bum! As coisas voam por todo lado. 
Resultado - é bom ter um cara como eu 
por perto para consertar as coisas. 


Mesmo os melhores planos JavaScript preparados falham 


algumas VEZES. Quando isto acontece, e acontecerá, sua função será não entrar em pânico. Os melhores 
desenvolvedores JavaScript não são aqueles que nunca criam erros — essas pessoas são chamadas de mentirosas. 
Não, os melhores desenvolvedores JavaScript são aqueles capazes de perseguir com sucesso e erradicar os 
erros criados. O mais importante, os ótimos exterminadores de erros JavaScript desenvolvem bons hábitos de 
codificação que minimizam os mais furtivos e sórdidos erros. Uma pequena prevenção pode contribuir 
muito. Mas os erros acontecem e você precisará de um arsenal de armas para combatê-los. 


eca... um erro! 


Uma depuração real 


É um fator chocante da vida dos lanches... uma barra de chocolate pode conter 
até 60 fragmentos de um inseto. Por mais assustador que possa ser esse pequeno 
petisco de informação, não há nenhuma razão para temer os erros no código 
JavaScript. O código JavaScript pode ser mais precisamente controlado do que 
o equipamento que processa os chocolates. Há até uma força-tarefa dedicada 
unicamente à remoção dos erros JavaScript. 


ICE: 


INVESTIGADORES DA CENA DO ERRO 


São os Investigadores da Cena do Erro, ou ICE, como são referidos no ramo. 
Owen juntou-se 20 ICE recentemente como um investigador JavaScript e está 
ansioso para provar e ajudar a livrar a Web dos erros JavaScript. 


o; inve. lar 
Aade já Eiry 


apaixonado por chocolates. 


Uma barra de chocolate 
carregada de insetos... eca! 


Nerd 


Segundo a Administração 
de Alimentos e Drogas dos Estados 
Unidos, até 60 “fragmentos” de 
inseto são permitidos em qualquer 
determinada barra de chocolate. 
Em oposição ao “mundo real”, as 
pessoas no ICE têm uma política 
de tolerância zero para os erros 
JavaScript e você também deveria. 


Entre Owen e o sucesso 
estão vários casos que 
precisam desesperadamente 
de sua atenção, Ele terá que 
dominar a magia da depuração 
JavaScript antes de poder subir 
de posição e tornar-se um 
detetive JavaScript completo. 
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O caso da calculadora QI com erros 


O primeiro caso que chegou à mesa de Owen é um 
script da calculadora QI que faz parte de uma página que A 
calcula o QI a partir de um array de QIs e então, agrupa disponiveis em www altabooks. 
os usuários cujos resultados são parecidos. Portanto, o com br, 

script recebe um array de números e depois, calcula uma 

média e indica a inteligência dessa média. 


Os arquivos para Owen estão 


Owen foi informado que esse script tem muitos erros. 
Infelizmente, nenhuma outra informação foi fornecida 
além de “não funciona”. 


113 = 
5, 146, 
06, 75, 92, 105, 
A Ga mena 
29, 64, 144, 1654 AO 
4 
Um array de &Zse 
fornecido ao script. 
Aa BS Case 11O Cu k 
j o —— =) 
Ready 1 caule be average 1Q 
Click OK to begin IQ calculation. 


é A 

É assim gue o script deve 
funcionar... inteligme 
não funciana. 


BSI Case 1: 1Q Calculator 


Um QI médio É calculado 
e convertido em uma 
classificação de imbelizência. 


Nem sempre você pode 
herdar um código bem 
escrito para depurar. 
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quem é seu navegador? 


Experimente navegadores diferentes 


Owen calcula que executar o script problemático em alguns 
navegadores diferentes poderá ajudar a trazer alguma luz 
para o problema. Ele inicia com o Internet Explorer... Internet 


Explorer 


Clicar dvas vezes no sinal 
amarelo no camto interior 
esquerda do TÉ abrira 


uma janela de erro. ~ 3 


O Internet Explorer informa um erro quando a página é carregada 
pela primeira vez, mas Owen não está certo de que pode confiar 


nele. Uma olhada rápida no código para obter o script mostra que a A variável igs É definida 
variável iqs existe, mas o navegador IE mostra que não. Sabendo no codigo, portao a erro 
que os navegadores nem sempre são precisos ao informar erros, ele do TÉ não parece fazer 
decide insistir com o navegador Safari... nenhum sentido. 


Se você considerar as 
linhas de códiso pve iniciam 
em /, o Safari aportara um 
erro em uma linha de codis liga 
gue parece boa inicialmente. 


O Safari aponta que o erro está em uma linha de código 
inteiramente diferente, que imediatamente não parece 
ter nada de errado para Owen. Portanto, ele decide fazer 
uma tentativa em localizar o erro com o Opera... 


o número da linha e é diferente, 
mas o códiso no erro Opera 
coincide com o erro Safari, 


Beady 10 cabedae te menage IQ 


Os consoles de erro do navegador são Eca 
uma ótima maneira de diagnosticar os 
problemas de codificação JavaScript, 
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; á j i e, mas 7 
estranho aqui. O Opera menciona um número de linha ieat Gis Firefox 
Teni algo te à mesma linha de código do Safari, o que E ali adquiriu ainda 
está referindo-se clarament NAE ele Gia bão vê mada errado com Gógaigos 3; bs 
ii s ele ai 
uma boa notícia para Owen. 


é Fro numero 
i: ão, o Firefox. O Firefox é muito V i E 
Portanto, decide tentar mais uma opção, peet Eai EREET 


7 
problematico, 


<html> 
<head> 
“ELtLO>BST Case 1: IQ Calculatore/ritios 


<script type="text/javascript”> 
DOR das = 1 113, A a T T (64 


114, 155, 56, 97, 88, 108 j; 


function showIQCiase (data) { 

alert ("Click OK to begin TO calcular: 

document .getElenentByTd ("output") . tnnerHTi, = “y, |u are dealing with <em>" + 
salcIQClassidata) + "c/em>.”; 


2 


function calcIGClass (data) ( 
é Calcule o QI médio 
var average = 0; 
for (GAL SOS L e data Length; Ais) | 
average += data[1); 
Average = Math.ficor (average / data. Length); E 


A hal Acho que 
vejo o problema, 


{7 Retorne a classificação do GI médio 


if (average < 20) { 
return “people who should kill therr tvs 
if average < 50 (| 


Feturn “people who should really hit the books“; 
j 
else 1€ (average < 70) ( 

return “pecple who should hit the books”; 


i 
else if taverag < an) | 
*etben “people who should consider brain exerciceat; 


O Firefox confirma 


ù lo 
else if taverage < 111) ( esta linha como send: 
return “people of average intelligence; AAND tA, 


, 
else i£ (average < 121) | 
return “people of superior intelligence”; 
, 
else if (average < 141) į 
return “people of very superior intelligence; 


3 
else į 
return “geniuses”; 


Poder do 
cérebro 


Qual erro de codificação Owen sescobiuo com a 
ajuda de seu exército de navegadores Wel 


1 
</script> 
</head> 


<body onload="showIQClass(iqs);”> 
Sing src="brain.png” alte*brain* /> 
<br /> 
Salv idetoutput"sReady to calculate the a 

</body> 

</mtml> 


você está aqui» 489 


é um pássaro, é um avião... é o Firefox 


O Firefox é amplamente considerado 
o melhor navegador de depuração, 


Firefox para o resgate 
pelo menos por enguanto. 


Dado o modo como o Firefox é específico 
ao descrever o erro, Owen decide 
aprofundar-se um pouco mais usando-o. 
Então, ele clica no link na janela de console 
do erro Firefox e vai para a linha logo 
anterior à linha de código suspeita. Não só o Firefox tem excelentes capacidades 
de detecção de erros predefinidas, mas 
também tem um depurador plug-in chamado 
Firebug que leva a depuração a um nível 
inteiramente diferente. O depurador 
Firebug para o Firefox pode ser baixado 
gratuitamente em 4/4p:/ / www getfirebug.com/ . 


Não se prescupe com o segunda erro 
agora — veremos um de cada vez, 


<head> 
SEÍtIO>BSI Case 1: 10 Calculatorc/tatie> 


Seguir a link 
ZA 
abrira o codigo 


<script type="text/javascript”> 
Var iqa = [ 113, 97, 86, 75, 92, 105, 146, 77, 64, 


114, 165, 96, 37, 88, 108 J; 


/ 
function showrQciass (data! 
para a página OR to pega i 
psi o do x to begin TO calculation, "i; 
é TETO aaa DEAYTA COUEPUR*) .SanerHTAL = “You axo dealing with <er% 
um destague 
loga artes do function calcIQCians (data) ( 
, 7 Calcule o Of madio 
codigo suspeito, ?, 
À < däta.length; ier) 4 
average += datali]; 
average = Hath.Noor average / data_length); 
/ Retorne a classificação de Gt médio 
i£ (average < 20) 1 
A ketura “people who should kili their tvs"; 
AN ALL their tvs"; 
86 So ataca Sparla MAE inia 
que causa o 7 etura “people who should really nit the boot 
problema, RAAE aei 
p Teturm "people whe should nit the booka”: 
else if taverag < s1) { 
| ZOER “people who should consider brain exercisesr; 
Analisando a mensagem de erro Firefox, Owen descobriu que ciso ir ARDE 


o Safari está realmente certo sobre o número da linha (25). O 

Firefox destaca e menciona a linha 24, mas mostra corretamente Aim, trução H não tem 
o código na linha 25. O mais importante, o Firefox explica parêntesis emvolta da 
exatamente o que está errado com o código, que é um problema ra lição de teste, 
simples, ainda que seja muito fácil de deixar passar. 
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Não existem 
Perguntas idiotas 


P: Não consigo descobrir como exibir o console 
de erro em meu navegador. Como posso abri- 
lo? 


R: Infelizmente, cada navegador é diferente e alguns o tomam 
um desafio para encontrar o console de erro JavaScript. Por 
exemplo, o Safari no Mac permite apenas acessar o console de 
erroa partir do menu Debug (Depurar), que está desativado por 
padrão. Você tem que enviar o seguinte comando (escrevê-lo 
em uma linha, sem retomo de linha) no aplicativo Terminal para 
mudar as definições e ativar o menu Debug: 


defaults write com.apple.Safari 
IncludeDebugMenu 1 


Verifique a documentação de seu navegador específico para 
descobrir como abrir o console de erro e exibir os erros do 
script. O console de erro no Firefox é aberto selecionando Error 
Console (Console de Erro) no menu Tools (Ferramentas). 


P: O que torna o Firefox tão especial? 


R: Os desenvolvedores do Firefox fizeram um ótimo trabalho 
em suas capacidades de informar erros. Ele simplesmente 


Como depurar de modo fácil 


Owen está muito entusiasmado com a separação rápida do 
erro no script da calculadora QI. E com tal correção simples 
do código feita, ele calcula que será capaz de avançar em seu 
serviço e tornar-se um detetive ICE em pouco tempo. 


supera os outros navegadores ao avaliar os erros do script e 
apontar a direção certa para encontrá-los. Isso não quer dizer 
que algum outro navegador poderá acompanhar e fazer um 
serviço melhor em algum momento no futuro, mas o Firefox 
tem se mostrado um navegador muito capaz para depurar as 
páginas que contêm o código JavaScript. 


F Sobre qual erro o Internet Explorer estava 
falando? 


R: Realmente não há nenhuma maneira de saber com 
certeza. A razão é que o erro informado pelo Internet 
Explorer tem relação com o código do script não carregando 
a propriedade, que é resultado de um erro encontrado pelo 
interpretador JavaScript. Você sabe que o código não está 
sendo devidamente carregado porque a variável iqs está 
sendo informada como "indefinida", mesmo que o código 
mostre claramente que a variável iqs é criada. Portanto, 
o único modo de poder ser um problema é se algum outro 
erro estiver impedindo de alguma maneira que o script seja 
totalmente carregado. 


E isso levanta a pergunta... há algum outro erro no script e o 
que “indefinido” realmente significa? G 


Este negócio de depuração é 
fácil. Com um pouco de ajuda 
do Firefox, meu serviço é 
mamão... com açúcar. 


else if (average < 50) { 


/ 


Colocar a condição de teste 
embre parêmbesis resolve à 
erro na calculadora az. 


Adicionar os 
parêntesis que 
faltam acaba Há uma chance de Owen ter conseguido 
com o erro. uma dose prematura de confiança excessiva? 
\ Ele realmente precisa testar o script recém- 
) corrigido antes de tirar o resto do dia de folga... 
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o que aconteceu aqui? 


O relatório do erro nem sempre é a fonte do erro 4 saye sesta zungão 


Infelizmente, Owen não terminou com o caso da calculadora QI porque o coincide com a chave 


Firefox ainda está reclamando, com exceção de que agora é um problema 
completamente diferente. Embora ele esteja tentado manter a mesma tática Firefox, portanto 
de confiar na avaliação do Firefox, implicitamente, desta vez Owen tem suas „asa falta nas chaves 


mencionada pelo 


dúvidas sobre a validade do erro informado. da função 
arem» 
<head> 
Ele>BSI Case 1: TG calculatere/tatte> r 
ipt ty text/javascripe”> pene = sa 
ar iqs = [ 113, 97, 86, 75, 92, 105, 146, 77, erro de cada 
Function shourociass (data) ( 
Siere (CICK OK to Pagin TO caleilation.- pre preta 
document. gerElementByTa ("output"), inner e comtinvemos a 
” o 


SalciQClass data) + *</em>.”; 


! 
ignorar este agora, 


function calerQCiass (data) | 
4 Calcule o QI médio 


aai w G Ls O 4 


average =- Math.flcor (aver; Errors Warnings Messages — Clear 


for (var i = 


average 


fstaga re iavorage cpa, 
f ESC 


clipe: peiré urr “poeple who shou Seure Fie 


average < 50) | 


a gual o return “people who shou paars 
Firefox else if (average < 70) p (9 Error shomcias is not 
K return “people who shou: Source File: fiie pp sers michael /Documents/headfirstishapter L (examples /bsilcasel Lhtmi Une: 1 
esta f 4 
else it tavézas « ar 
reclamando ` cetuzo "pronio vis shoui 


j 
else 1º taverage < 91) 
| Tetun “people wno ouias 
lse i£ (average e 111) ( 

J p (e “psp o average anatganer 
eise i£ (average < 121) 1 

|, Jets "people GF suparior Amtetitgêncas, 


Acho que seu depurador 
mágico simplesmente confundiu 
tudo. Claramente, as chaves na 
função neste código são boas. 


) 
eise if (average < 141; ( 
return "people cf very superior intelligence”; 


sise | 
return “geniuses”; 


po 


</head> 


<body onload="showrQCiass (igs) ;”> 


<img src-"brain.png” alt="brain" /> 
Ae png” b p 
<div id="cutput”>Ready to calo, 
ser E 'y to calculate the average IÇ.</div> 


</html> 


Nem sempre você pode confiar no navegador. 


É verdade, as chaves da função são boas. Por melhor que possa ser em 

alguns casos, parece que o Firefox está desperdiçando seus esforços nesse 
erro. Porém, vale a pena considerar a menção de uma chave ausente como 
uma dica para estudar todas as chaves no código um pouco mais de perto. 
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acabe com os erros completamente 


Seja o interpretador JavaScript 

Seu trabalho é ser o interpretador JavaScript e E 
seguir a trilha das chaves no código para descobrir 
o que deu errado. 


<html> 
<head> 
<title>BSI Case 1: IQ Calculator</title> 


<script type="text/javascrapt”> 
var iqs = [ 113, 97, 86, 75, 92, 105, 146, 77, 64, 114, 165, 96, 97, 88, 108 J]; 


function showIQClass (data) ( 
alert (“Click OK to begin IQ calculation.”); 

document . getElementBy Id (“output”) innerHTML = “You are dealing with <em>” + 

calciociass (data) + “</em>. 


function cslcIgClass (data) { 
+! Calcule o QI médio 
var average = 0; 
for (var à = 0; i < data.length; i++) ( 
average += datali]; 
average = Math.floor (average / data. Length); 


/! Retorne a classificação do QI médio 
if (average < 20) ( 
return “people who should”; 
i 
else if (average < 50) { 
return “people who should”; 
, 
else if (average < 70) { 
return “people who should”; 
1 
else if (averag < 81) ( 
return “people who shouldeiicient people”; 


else if (average < 91) ( 
return “people who could”; 
} 
else if (average < 111) { 
return “people of average intelligence”; 
} 
else if (average < 121) ( 
return “people of superior intelligence”; 
} 
else if (average < 141) ( 
return “people of very superior intelligence”; 
} 
else ( 
return “geniuses”; 
, 
, 
</script> 
</head> 


<body onload="showIQCiass (iqs) ;”> 
<img src="brain.png” alt="brain” /> 
<br /> 
<div id=“output”>Ready to calculate the average IQ.</div> 
</body> 
</html> 
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seja a solução 


A chave de // Calcule o QI médio 


<html> 


Seja o interpretador JavaScript Solução 


Seu trabalho é ser o interpretador JavaScript 
e seguir a trilha das chaves no código para 
descobrir o que deu errado. 


<head> 
<title>BSI Case 1: IQ Calculator</title> 


<script type="text/javascript”> 
var iqs = [ 113, 97, 86, 75, 92, 105, 146, 77, 64, 114, 165, 


96, 97, 88, 108 ]; 


function showIQClass (data) ( 
alert ("Click OK to begin IQ calculation, ”); 
document. getElementById (“output”). innerHTML = “You are dealing with <em>” + 
calcIQCiass (data) + “</em>.”; 
, 


function calcIQCiass (data) 


var average = 0; 


fechamento tor (var i = 0; 3 < data.length: in (D chave 

ne falta 7 average += datali que 

ve tica, SVSTASO = Math.floor (average / data. Length): falta acaba 
Cleah C) com o erro. 

agui, // Retorne a classificação do QI médio STE Chave ne | 


da variavel 


fechando `£ (average < 20) (O Hem sua chave 
return “people who )should”; whit 
apenso Q) de fechamento! 
dessa 1£ (average < 50) (1) 
E anti wi > 


el. 


Você poderia também 


average. else if (average < 70) (1) 
ge O return “people who should”; ) Simplesmente encerrar a 


else if (averag < 81) Q) chave de abertura depois 
return “people who shouldeficient people”; do loop for, uma vez gue 
(O) ra 
ele esta executando 


apenas uma Unica linha de 
codigo, embora as chaves 
ajudem a Fornar clara 
qua! codigo esta sendo 
executado no loop, 


Else if (average < 91) (1) 
© return “people who could”; J 
else if (average < 111) {) 
O return “people of average intelligence”;) 
else if (average < 121) (1) 
return “people of superior intelligence”) 


Else if (average < 141) (1) 
return “people cf very superior intelligence”; 


tea 
retúem “geniuses x 
combinadas ou ausentes 


Jaep são um erro comum do 


</head> 


<body onload="showIQClass (iqs); "> Ji avaSesipt, que pode 
<img sre="brain.png” alt="brain” /> E 
cr 7> ser evitado com atenção 


<div id-"outpur”>Ready to calculate the average IQ.</div> 


a aos detalhes. 


</html> 


© 


© 


fo 
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acabe com os — - completamente 


As variáveis ficaram selvagem indefi 

aa a a 

-oia aiao r A 

Agora, o Firefox está informando que uma variável “não está definida”, que parece 

o tipo de erro falso que o Internet Explorer informou no início. Exceto que desta 

vez a variável indefinida é averaq, não iqs. Note quê é segundo erro 
agora sumiu, Prgumas 
vezes, Corrigir ym erra 
resolve malmente 
mais de um erro, 


Não estou certo, mas 
pensei que uma variável 
indefinida fosse uma que 
não tivesse sido 


else if (ayemagac 51) í 


return “people who should consider brain exercises”; 


Edo 
carente seu Lápis 
Escreva o que você acha que significa “indefinido” no contexto 


do último erro na investigação de Owen. 
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verifique seu trabalho 
«x Aponte seu Lápis 


a Solução Escreva o que você acha que significa “indefinido” no contexto 
do último erro na investigação de Owen. 


for 


Indefinido refere-se a uma variavel gue não foi criada Cusando var) ou que 


ca 


problema é 


'mbum valor, 


Algumas vezes, são as coisas simples Algo Bio sitios 


Neste caso, “indefinido” definitivamente refere-se a uma variável 


que foi usada sem ter sido criada, embora neste caso tenha sido quanto um etro 
por acaso. A única razão para a variável ser indefinida é por causa F 
de um erro tipográfico que resulta no interpretador JavaScript tipográfico 


pensando que é uma variável inteiramente nova. 


geralmente pode 
destruir um soript. 


don calcicCiass (data) | 
Callao aa Diagnos ficar, um 
liagnos Ticar, 


var average = 0, e 2 

or (var i= ie ic nrigir à nome da 

average «o dah o Sta length; dissy | eMPO tipografico i 2 ja 

i ali] é a parte dificil... variavel mal digitado 
is 


resolve o problema da 
7 
variavel indefinida, 


/ 


lse ıf (average < 81) | 


£4 Retorne a classifica, 


if faverage < 20) 4 779 do QI médio 


Teturn “people wi 
, People who should RIT their tvar; 


Bias di (average < 50) | 
urn “people who 

, Should really hit the books”; 
de fe o return “people who should consider 


i people who should hit the books»; brain exercises”; 


: 3 n exercises”; 
se if (average < 91) ( 


return ” 
z People who could be con: 


else 1f (average < 111) | 


sidered dull”; 


Teturn “peopl 
else i£ (average < 121) i i 
zetupn saesae 
the average IQ. 


Click OK to begin IQ calculation. 


= 
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F: Há uma diferença 
entre “indefinido” e “não 
definido”? 


R: Nāo. Significam exatamente 
a mesma coisa. Apenas alguns 
navegadores usam um termo e outros 
utilizam o outro, Considere os dois 
termos como sendo inteiramente 
alternativos. 


F: Tudo bem, portanto há uma 
diferença entre “indefinido” e 
null? 


R: Isso é um pouco mais capcioso. 
Sim, em um nível muito técnico, há uma 
diferença entre "indefinido" e nu11, 
mas não o suficiente para preocupar. 
Diferente de nu11, “indefinido” não 
é um valor que você deve considerar 
atribuir a uma variável. Há um tipo de 
dado undefined que as variáveis 
adotam automaticamente quando têm 
que ser atribuídas a um valor. Por outro 
lado, as variáveis nunca são definidas 
automaticamente a nul1. Porém, 
algumas vezes é uma boa idéia definir 
as variáveis do objeto para null, 
como uma etapa da inicialização para 
assegurar que está claro que um objeto 
não foi criado ainda. 


Como esmiuçar os núm 


Não existem 
Perguntas idiotas 


Com exceção dos detalhes muito 
técnicos, o principal a saber sobre 
“indefinido” e nu11 é que ambos 
convertem-se em false quando 
colocados em um contexto booleano 
como, por exemplo, a condição de teste 
de uma instrução if. É por isso que 
um código como if (algumObjeto) é 
geralmente usado para verificar se um 
objeto foi criado antes de tentar acessar 
seus membros. 


P: Ainda não entendo bem 
como um erro tipográfico 
transformou, de algum modo, a 
variável average em indefinida. 
Como isso aconteceu? 


R: Mesmo que uma variável chamada 
average já tivesse sido criada e 
inicializada, o JavaScript não teria 
capacidade de fazer a conexão entre 
averag average só porque elas 
têm praticamente o mesmo nome. 
Avariável averaa poderia facilmente 
ser nomeada como shazbot ou 
lederhosen no que diz respeito 
ao JavaScript. Isso quer dizer que 


eros da inteligência 


acabe com os erros completamente 


o JavaScript a interpreta como uma 
variável inteiramente nova. E como essa 
nova variável ainda tem que ser atribuída 
aum valor, é um grande problema tentar 
comparar algo com ela em uma instrução 
i£. É como tentar escrever uma crítica 
de cinema antes de ter decidido sobre 
qual filme assistir. 


p: Você está brincando? 
Cometo erros tipográficos 
o tempo inteiro em meu 
processador de texto e ele 
não pára nada. Por que o 
JavaScript é tão sensivel? 


R: Respire fundo e coloque estas quatro 
palavras muito importantes e criteriosas 
na memória: ACOSTUME-SE COM 
ISTO. Não estamos escrevendo scripts 
para pessoas, estamos escrevendo 
para máquinas e as máquinas são 
qualquer coisa, menos bondosas, 
independentemente da linguagem na 
qual você está fazendo o script. Até um 
caractere no lugar errado pode irritar o 
script. Há alguma flexibilidade no espaço 
em branco em volta do código JavaScript 
como, por exemplo, os espaços e as 
novas linhas, mas o código em si deve 
ser muito exato. 


Com o erro tipográfico sob controle, agora o script da calculadora QI funciona 
devidamente, ao calcular um QI médio a partir de um array e, então, exibindo o 
resultado como uma classificação de texto. Owen pode fechar este caso e gozar da 
glória de um trabalho bem feito... mas por quanto tempo? 


digitado acaba 
com o erro. 


Corrigir o nome 
da variável mal 


You are dealing with peop! 


BSI Case 1: IQ Calculator 


graças aos esforços de 


o. 


Agora, a calculadora AT 

E, 

funciona como o esperado, 
peoa, 


depuração de Owen. 


le of average intelligence. 
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chame agora para vencer 


Qy Pontos e Bala 


= Embora a maioria dos navegadores 


As chaves em torno dos blocos de código 


forneça um console de erro que oferece são uma fonte comum de erros — tenha 
informações sobre os erros JavaScript, nem cuidado em sempre coincidir as chaves de 
sempre eles podem ser confiados como abertura e de fechamento. 


sendo completamente precisos. 
m Mesmo que os navegadores geralmente 
produzam informações incompletas do 
erro, normalmente fornecem dicas valiosas 
sobre onde começar a procurar o problema. 


m Os erros tipográficos simples são fáceis de 
cometer, mas não necessariamente fáceis de 
encontrar — sempre verifique o nome dos 
identificadores. 


O caso dos erros das chamadas da rádio 


Owen mal teve tempo que comemorar seu primeiro caso 
fechado antes de outro caso chegar à sua mesa. Seu novo caso 
envolve um script que deve processar as chamadas para um 
concurso da estação de rádio, determinando um vencedor 
com base no número da chamada. O script deve manter uma 
contagem dos solicitantes e apenas declarar um vencedor 
depois de certo número de chamadas como, por exemplo, 
sete. 


Desculpe, você é 
o solicitante # 2. 


Desculpe, você é 
o solicitante # 5. 


Alan, calter number 7...today's winner! 


ess 
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acabe com os erros completamente 


Como abrir a investigação 


Antes de iniciar a página de chamadas da rádio em um navegador, Owen pensa que 
vale a pena dar uma olhada rápida no código (disponível em hiip:/ /wum:headfirstlabs. 
com/ booksj bfjs/) e ter uma idéia sobre como é reunido. Talvez algo apareça como 


sendo obviamente errado, ou talvez ele pelo menos terá alguma compreensão de 
como o código deve funcionar. 


, 
O nome do solicitante e o número da chamada vencedora 


* Avise a 
são +ransmitidos para a função checkWinnerl ), junta Z 
J usuario 
O cortador de chamadas com o objeto da formulário, | é 
e inicializado em zera. H e envie o 


s 
formulario, 
casa o 
<html> ; 
ps callere/ritle> EANN 
CitLe>BS1 Case 2: Winning 
chamada 
ertext/javascript"> er 
e ro total ds chamados prue 
var caliNum = 


e númera 
comm, cahier, vinningum) l 

stign enectitianer (form, c 
function check número da chamada 


var caliNum; 


| > Tain 


nte i edor 
4} verifique o venc, - i 
Punente qa qa e mantoa l aner + cab + ue ta E 
campadar de alerticaller + *, caller 
om submit ( )5 
chamadas. , forn. 
eise ( 


i de 
e roost) E O nbtodo Focust) define o foco, 
E ” 


agin 
prae entrada para um elemento na pas 
campo do nome 7 E ; 
do solicitante cjaceibt> D método seleto) seleciona a eres y 
DE mo de texto. 
para o próximo i armazenado em um elemento 


solicitado, <body 


9 <form name="c 
caso nao haja img src="ra 


um vencedor. Caller name; civent, 
dios Crea ni tern de 


«calitorm" actions"radiocalt Enp" methode"POST"> 


dio png” alt="radio” /> 


ertoxt” 1> 
Tier” name="caller” type="text 


ry value, Nº /> 
.getElenentayTd( caller") ~ T 


</form> 
</body> 
</html> 


O script do servidor 
para armazenar o 
solicitante vencedor. 


Chame a função checkWinnert) 
quando o botão Call for clicado, 


Ajude Owen a ter uma vantagem no caso circulando o 
número de erros que você acha que existem no código 


ponie seu Lápis 
do script de chamadas da rádio. 


Nenhum Dois Quatro 
Um 


Três 


Ci 
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dizer o quê? erros de sintaxe 


aque seu Lápis 


a Solução 


Ajude Owen a ter uma vantagem no caso circulando o 
número de erros que você acha que existem no código 
do script de chamadas da rádio. 


Nenhum Dois 
Um tio Z Cinco 


Cominvemas com a caso e 


N ajudemos Owen a encombrar e 


resolver estes guatro erros. 


Uma questão de validação da sintaxe (Erro #1) Os erros da 


Com uma idéia geral de como o código deve funcionar em mente éhora SAXE SÃO sempre 
de voltar ao Firefox e ver o que realmente acontece quando o script de «, á o: os 
chamadas da rádio é executado. De modo parecido com os outros erros informados pelos 
vistos, o Firefox informa imediatamente um erro de sintaxe, que é um navegadores, 

erro de codificação que viola as regras da linguagem JavaScript. 


supondo que o 
ema z r5 relatório de erro 


esteja ativado. 
'headfirst/chapter1 1/examples/bsijca... O 


r iness 
azertealier + *, cai 


ler, winmingNum) ( 


o caller 2 próximo solicitante 


Éste erro indica uma var GsllorE document .getElementByid (“calle”); 


callerFíela = “Next 


1 
linha de codigo com uma caliarried. tooua( jy o 


concatenação de strings. , OMMarFisid.selece( ); 
i 
<iscript> 
</head> 


<body> 
<form name="callforn” action=-"radiocal] .php” methed="post”> 
<img sres*radio.png” alt="radio" /> r 
Caller name: <input id=-"caller” name-"caller” typerttext” /> q 


a E EE AN t 
Une 16,Col 1 E E 


Os erros de sintaxe sempre resultam em algum tipo de notificação do 
navegador, supondo que o navegador esteja definido para os erros do 
relatório. Isso fornece um começo muito importante ao controlar os erros. 
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acabe com os erros completamente 


Cuidado com essas coisas 


O Firefox indicou uma linha de código com uma concatenação de strings, que é 
uma dica para analisar a linha de código com muito cuidado. O código chama a 
função alert ( ) com várias literais de string concatenadas com as variáveis 
caller e callNum. 
if (callNum = winningNum) 
alert (caller + ng 


+ callNum + mM 


A fstas duas literais de string são 
eso 73 


concatenadas com dvas variaveis. 


É importante que as 
aspas sempre apareçam 
em pares, não é? 


Colocar aspas em pares é fundamental no código JavaScript. 


As aspas sempre devem aparecer em pares, do contrário o código JavaScript 
não seria capaz de dizer quando uma string termina e outra começa. No caso 
do código de chamadas da rádio, uma das literais da string na concatenação 
de strings não tem sua aspa posterior. Isto é definitivamente um erro de 
sintaxe, uma vez que confunde o JavaScript sobre onde a string termina. 


Para corrigir o erro, simplesmente adicione a aspa que falta ao final da string; 


if (callNum = winningNum) 
OX carmon + * 


alert (caller + “, caller number today’s winner!”); 


if (callNum = winningNum) 


alert(caller + “, caller number “ + callNum + “... toda! winner!”); 


i 

| Corrigir as aspas 

| na string acaba 
com este erro. 


Í 
U 
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a consistência conta 


Aspas, apóstrofos e consistência 


As aspas que faltam são apenas metade da história ao controlar os erros 
relacionados a elas nas strings. Como o JavaScript e o HTML suportam igualmente 
aspas e apóstrofos para conter as strings (JavaScript) e os atributos (HTML), é 


fundamental ser consistente ao misturar os dois. 5 
As aspas sao usadas 


para conter todos os 
br sí atritutos HTIL, 
<input type="button” value="Call” 


onclick="checkwinner (this. form, document .gerElementById(“caller').value, 7)” /> 


Os apostrotos são usados para comter as 
strings VavaScript dertra de um atributo, 


Esta abordagem de usar aspas para os atributos HTML e apóstrofos para as strings 
JavaScript dentro dos atributos funciona perfeitamente bem e é uma boa idéia. 
Contudo, também é possível no HTML inverter os dois, como este código mostra: 


O padrão moderno sa página Web XHTML não 
permite gee os apostrotos sejam usados para 


conter atributos, 


<input type='button’ value='Call” J 
cnclick=’checkwinner ithis.form, document .getElementById(“caller”) .value, 7)! /> 


Pora os apostrofas são usados para 
os atributas HTML e as aspas são 
usadas para as strings VavaSeript. 


As aspas e Os 
A idêia aqui É ficar com aspas param {ipo decódigo e E 
apóstrofos para o outro. E como a versão moderna do HTML, apóstrofos devem ser 


o XHTML, requer aspas em torno dos atributos, faz sentido 
ficar com aspas em torno dos atributos e apóstrofos em torno alternados ao usar as 


das strings JavaScript dentro dos atributos. strin, gs Ja vaSeript nos 
Mas surge um problema quando você precisa especificamente 

de uma aspa ou de um apóstrofo, mas já está comprometido atributos HTML. 

com um deles como o caractere que contém a string ou o 

limite da string, Considere o seguinte código: 


Poder do 
cérebro 


O que acontece quando você precisa 
especificamente de um caractere de aspa 


alert (“It's so exciting!'); 


ic iana? 
tste codigo funcion ou apóstrofo em uma string que está contida 
usando o mesmo tipo de caractere? 
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acabe com os erros completamente 


Quando uma aspa não for uma aspa, 


use caracteres de escape 
Um erro comum envolve usar uma aspa ou apóstrofo como um Os caracteres de 


caractere dentro de uma string, mas sendo interpretado como um a, 
limite da string, Portanto, o código de alerta que acabamos de ver é um escape são usados 
erro de sintaxe porque o interpretador JavaScript não pode descobrir para especificar 
quais apóstrofos são limites e quais são reais. Felizmente, há um modo 

fácil de declarar que um caractere é um caractere “real”. É chamado caracteres literais 
de caractere de escape e envolve colocar uma barra invertida (N) na 

frente do caractere a ser usado literalmente. nas strings. 


alert (‘Itis so exciting!'); 


Agora, o apóstrofo teve o escape aplicado e o JavaScript sabe, sem dúvida alguma, 
que realmente queremos que um caractere de apóstrofo na string, em oposição a 
declarar o final da string. Naturalmente, poderíamos ter evitado o escape mudando 
o limite da string para aspas. 


alert(“It's so exciting!”); 
mod a ff 
O escape não è mais necessario, 


Isso funciona bem, mas e este código: 
alert (“They said, “you've won!””); 


A string contém aspas literais e um apóstrofo literal, portanto o escape é a única 
opção disponível. Em tal situação, é geralmente mais seguro aplicar o escape em 
todos os caracteres literais, mesmo que o apóstrofo possa passar sem ele. 


E es a r g pr 
escape não € necessario, 


alert (“They said, *”youl've won!\””); 7 
mas ainda € uma boa ideia, 


Corrija as aspas e os apóstrofos nos seguintes fragmentos de código, 
usando os caracteres de escape sempre que possível. 


Exercicio 


var message = ‘Hey, she's the winner!’ ; 


var response = “She said, “I can't believe I won.”” 
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solução do exercício 


Corrija as aspas e os apóstrofos nos seguintes fragmentos de código, 
usando os caracteres de escape sempre que possível. 


Solução do 
Exercício 
var message = ‘Hey, she's the winner!”; 


O apostrofo 

f5 ar message = 'Hey, she\'s the winner! 
não Fem gue o : 
Her a escape 
aplicado, — v3r response 
uma ves var response = “She said, \“I can\'t bi 
que aparece PEE PN 
dentro de <input type="button” value="Winner” onclick="givePrize (“Ruby 7> 
uma string | 

<in 

contornada -=> 
por aspas, 


= “She said, “I can't believe I won. 


os r e DA e A E, 
Os caracteres de escape não funcionarão neste casa, uma Lo 
ves gue € uma string Vavaseript dentro de um atributo 
HTML, Misturar aspas e apostrofos resolve o problema, 


O indefinido não é apenas para as variáveis (Erro #2) 


Um erro foi cuidado, mas Owen sabe que seu trabalho não terminou. Agora, o 
script de chamadas da rádio inicia bem sem erros, mas um clique no botão Call 
(Chamar) para fornecer um solicitante é tudo que é necessário para mostrar outro 
problema. E esse parece ter algo relacionado com a função checkWinner ( ). 


BSI Case 2: Winning Gale — 


oon -A n 
as Clicar o botão Call resulta em 
q um erro envolvendo de algum 
= modo à função checkWinnerC ), 
TS coternmefiad Je 
r Y.Y. ouune — zate 


a O a 


AN Errors Warnings Messages Clear 


gp rem sresdnmer o not detona 
Source Ph 4/ Documents [her st/chagser 12 /exampies/bsijcase2.2htmi Une, 1 


Done 
“e 1 “r 
/ O numero da linha não € vit, 


Z 
o Es. uma vez gue sabemos gue 
Por al uma naiãa, g a primeira linha do codiço 
Função não e definida, TRL na pagina não E um 
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acabe com os erros completamente 


Suspeitas comuns: a lista de verificação 


Com alguma experiência de depuração na manga, Owen 
decide executar sua lista de verificação recém-construída dos 
erros JavaScript comuns. Talvez esse erro coincida com um 
dos erros que ele já encontrou. 


* Parêntesis sem coincidênei 
ata m coincidência 
a =: 

Chaves sem coincidência vu 
ausentes, — Pants 
* tdentificador matdi 

ligit 

com erro tipogräfico. ado 


“spam 
ada U apóstrofo mal 


INu: 

fique um vencedor | 

allium = winninghum) N 
alert(caller + ", caller number im 

form. submit () 7 


eise i proximo 
7 Redefina o campo caller para o P: RD 
dy Redes O O socunent .gerElenentSyTd(Scaller"); 


solicitante 


“A folha de cola 


A sunção Caiserrssia-value para a detecção de 
ingas Sr parse tests 
checkWinnert jd. select(is 

7 
Je referida "9 
apenas duas </script> 


o </head> 
vezes no codigo, cpody> 


adiocal1.php” method="POST"> 


<form names"call£orm” action= 
<img src="radio.png” alt="car 


E amat ma i 
| dog tr Epin torar asiant prElenaat yal calar! 


<j form 
<ibody> 
</html> 


et 
eodiponto seu Lápis 
A Ajude Owen a verificar o tipo de problema que você acha 


que está incomodando o script de chamadas da rádio. 


B: Chaves sem coincidência ou ausentes. 


E Parêntesis sem coincidência ou ausentes. 
[Identificador mal digitado com erro tipográfico. 


[DJ Aspa ou apóstrofo mal usado. 
Ca Algum tipo de problema inteiramente novo. 
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solução inteligente 


e Aponte seu Lápis 


à Solução Ajude Owen a verificar o tipo de problema que você acha 
que está incomodando o script de chamadas da rádio. 


[1] Chaves sem coincidência ou ausentes. 
[ Parêntesis sem coincidência ou ausentes. 


TM Identificador mal digitado com erro tipográfico. 
DJ Aspa ou apóstrofo mal usado. 


N [DD Algum tipo de problema inteiramente novo. 


\ F -$ 
A Função checkWinnerl) é chamada comp ae | Corrigir o erro 
sem querer — chectwinnerC). O erro tipografico az | tipográrico 
com que o UavaSeript ache sa are $ euma l e nome da 
Er, ifere ve foi definida, inção acaba 
função inteiramente diferente g i brisat Sa 


A correção simplesmente 
requer colocar W maiúsculo na 
chamada para checkWinmer( 3, 


<input type="buttpr” valu all” 
onclick="checkWinner (this.form, document .getElementById ('caller'). value, 7)” /> 


Todos somos vencedores (Erro #3) 


Com o cuidado erro tipográfico “indefinido” e desagradável, o script de 

chamadas da rádio ainda está inicializando erros. A boa notícia é que o 

navegador não está mais informando nenhum problema. Mas o ruim é que 

todo solicitante agora é um vencedor — o script está declarando-os com o 

número correto do solicitante, mesmo quando não são. Serão muitos prêmios 

para entregar se Owen não sugerir uma correção! 
A coisa realmente estranha é peeo 
numero da chamada esta sendo mostrado 

N como o numero Vencedor, mesmo gue a 
Ellie, caller number 7...today's winner! Ê solieitanbe não sgae vonna 8 


ES ] 

Jason, caller number 7..today's winner! É / 
ED uy alter number 7..today's winner! 

Tada chamada está FERA if a 


declarada como um vencedor. 
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acabe com os erros completamente 


Depuração da caixa de alerta 


Sabemos que o teste para o número vencedor ocorre comparando a variável 
callNum com o argumento winningNum para a função checkWinner ( ). 
Mas este código parece bom... realmente precisamos de um modo de ver um pouco 
mais de perto o que está ocorrendo com a variável cal INum. 


4 
L Nada óbvio parece estar 
if (callNum = winningNum) ( errado com este códiço. 
KR 
= 
Vale a pena tentar rastrear o valor 
de callum para ver como ela esta 
mudando a direção para este codigo, 


Há um modo de ver o valor 
de uma variável em pontos 
diferentes em um script? 


Às caixas de alerta podem 
ser muito úteis para dar 
uma olhada rápida no valor 
de uma variável. ` 


As caixas de alerta podem servir como uma 
janela de observação da depuração. 


Como resultado, as caixas de alerta não são apenas para exibir 
informações pop-up para os usuários finais. Elas podem também 
ser úteis puramente no lado de desenvolvimento do código 
JavaScript como janelas de observação temporárias para ver as 
variáveis. Não só isso, mas os alertas podem ser usados para 
assegurar que certa seção do código está sendo chamada como o 
esperado. Neste caso, precisamos usar um alerta simplesmente para 
manter um olho na variável cal INum. 


A caixa de alerta fornece 
uma observação do valor 
da variável, neste caso e 
valor da variavel callum, 


esa 
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os alertas são ferramentas tambem 


Como observar as variáveis com alerta 


Uma observação é um termo de depuração que se refere a 
observar constantemente uma variável quando um programa 
é executado. Um alerta fornece uma observação primitiva que 
não é exatamente uma visão constante de uma variável, mas 
ainda pode ser muito útil. Um alerta pode ser usado como 
uma observação em qualquer lugar no código JavaScript, 
onde uma variável está em exame. 


Aliço não esti certon, callum 
deve ser definida para o 
numero da chamada atual. 


alert (callNum) ; 
if (callNum = winningNum) 
», call 


rz number “ + caliNum +"... 


NaN 


Owen percebe que o script de chamadas da rádio está vendo 
callNum e winningNum como sendo iguais de algum modo, 
mesmo que ca 11 Num esteja aparecendo como NaN, logo antes 
da instrução if. Embora já seja confuso que cal INum esteja 
aparecendo como NaN, ele decide mover o alerta para dentro da 
instrução if para ver se alguma coisa muda. 


Bingo! Acho 
que descobri. 


if (callNum = winningNum) ( 
alert (callNum) ; 
alert(caller + “, caller number " 

ms her “ + callNum + *... today\'s 


form.submit (); 
} 


/ 7 
A variavel calym agora esta 


aparecendo definida para 7, lago 


depois da condição de teste i 


Poder do 
cérebro 


Com a observação de alerta confirmando que cal Num está sendo 
definida, de algum modo milagroso para 7 em uma única linha de código. 
qual você acha que é a causa do erro? O que Owen descobriu? 
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acabe com os erros completamente 


Depuração com alerta 


Entrevista desta semana: 
O alerta compartilha seu desprezo pelos erros 


Use a Cabeça: Tenho que admitir, ouvi dizer 
que as coisas ficaram confusas para seu lado. As 
pessoas dizem que você pode ficar realmente 
chateado. Também ouvi que você poderia muito 
bem ser o melhor amigo de um depurador. Pode 
esclarecer quem é o alerta real? 


Alerta: Estas pessoas estão loucas em primeiro 
lugar. Sou maravilhoso. Também sou muito 
simples — você me fornece algumas informações 
para exibir c boom, faço um movimento pop-up 
e exibo-as. É tudo. Onde está o problema? 


Use a Cabeça: Acho que é a parte do “pop- 
up”. Os pop-ups conseguiram uma reputação 
ruim nos últimos tempos com todos os 
anúncios ridículos que algumas vezes aparecem 
instantaneamente em todo lugar. 


Alerta: Ah, entendi. Sim, posso ver onde 

isso poderia realmente ficar chato. Mas você 
não pode culpar um martelo pelo carpinteiro 
estúpido que não sabe como usá-lo. Entende o 
que quero dizer? 


Use a Cabeça: Então, está me dizendo que 
qualquer coisa ruim que ouvi falar sobre você 
tem relação com você ser mal utilizado? 


Alerta: É isso aí. Como disse, apenas faço 

o que pedem. Você diz para eu aparecer 
instantaneamente um monte de vezes com 
anúncios bobos, faço isso. Não estou dizendo 
que gosto, mas realmente não tenho escolha. 
Éi, achei que você fosse perguntar sobre minha 
contribuição para o mundo da depuração. 


Use a Cabeça: Ah, desculpe-me, Sim, ouvi dizer 
coisas realmente boas sobre como você ajuda os 
desenvolvedores JavaScript a rastrear os erros 
em seu código. Como faz isso? 


Alerta: É muito simples, realmente. Digamos 
que haja uma variável que ficou maluca, sendo 
definida para algum valor que não faz sentido. O 
programador está tendo uma experiência ruim, 
está supercafeinado, você sabe o que quero dizer, 
e precisa desesperadamente de um modo de dar 
uma olhada na variável em lugares diferentes 

no script para ver como ele está sendo alterado. 
Então, ele pede que eu apareça instantaneamente 
e mostre a variável. 


Use a Cabeça: Mas como você é capaz de 


mostrar o valor alterado da variável em pontos 
diferentes em um script? Parece difícil. 


Alerta: Absolutamente. Tudo que você faz é me 
chamar diversas vezes, com cada chamada em 
um ponto diferente no script. 


Use a Cabeça: Entendo. Você alguma vez teve 
problemas ao ajudar como uma ferramenta de 
depuração? 


Alerta: Bem, tenho que admitir que não sou 

tão bom ao exibir informações de depuração 
quando há uma parte do código sendo executada 
muitas vezes, como em um loop. 


Use a Cabeça: Por quê? 


Alerta: Bem, lembre-se de que sou uma janela 
pop-up, portanto tenho que ser clicado para 
desaparecer. Se eu estiver aparecendo muitas 
vezes, são muitos cliques. = 


sso faz sentido. Também ouvi 
jue você pode ser útil mesmo quando não 


dizer 
há dados para serem vistos. 


Alerta: Ah, sim. Há muitas situações em que 
não ficam bem claro se ou quando uma parte 

do código está sendo chamada, Uma chamada 
sinta para mim dentro do código permitirá 
saber se o código está realmente sendo chamado. 
Sou transformado em um tipo de alarme apenas 
para permitir que você saiba se o código é 
chamado. 


Use a Cabeça: Em todas essas situações de 
depuração, você está dizendo que você é apenas 
temporário? 


Alerta: Ah, absolutamente. E não me importo. 
Não é como se eu não tivesse meu papel 
permanente também — apenas faço a depuração, 
da minha parte, como um pequeno serviço 
público. 


Use a Cabeça: Bem, fico agradecido por seu 
tempo em explicar seu papel na detecção do 
erro. Espero vê-lo em breve. 


Thanks. See ya! 


es 


é lógico? 


Uma lógica ruim é legal, mas tem erros 
Owen aperfeiçoou-se na lógica do erro, um erro que é 


perfeitamente legal segundo as regras do JavaScript, mas O codigo gue parecia bom 
inteiramente errado em termos do que deve fazer. Neste caso, anteriormente acabou 
= é usado no lugar de = =, significando que wi nningNum Fendo um erra sutil que 
está sendo atribuído a cal Num, ao invés de ser comparado foi dificil de desca, a 


a ele. Sutil? Sim. Mas ainda altamente problemático. 


if (callNum O) winningNum ( 


if (callNum == winningNum) ( 


O problema real com este erro é que ele não faz o navegador fracassar e gera 
um erro como os erros da sintaxe. O interpretador JavaScript não reclamou 
porque uma atribuição “retorna” o valor sendo atribuído, neste caso 
winningNum, que é, então, convertido automaticamente em true (não 
zero) na condição de teste i f. Em outras palavras, o código é perfeitamente 
legal mesmo que não tenha feito o que queríamos. 


Então, os erros lógicos nem 
sempre aparecem no console 
de erro de um navegador? 


p= 


Os erros lógicos gostam de voar abaixo do radar. 


O que torna os erros lógicos um problema para lidar é que eles geralmente 
não se mostram como erros da sintaxe. Embora um erro do script em um 
navegador possa parecer um pouco ridículo, realmente é uma sorte porque é 
um erro que foi detectado para você. Os erros lógicos não violam nenhuma 
regra da sintaxe JavaScript, portanto, geralmente, são mais difíceis de detectar. 


Por outro lado, os erros lógicos algumas vezes resultam em um erro do 
script enquanto um script está em execução. Por exemplo, se um erro 
lógico resultar em uma variável não sendo inicializada, um erro “indefinido” 
aparecerá quando o script tentar referir-se à variável. Portanto, algumas vezes, 
um erro lógico poupa você do sofrimento de uma caçada cansativa ao erro. 
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a Os erros da sintaxe 
envolvem o código 
que viola as regras da 
linguagem JavaScript e são 
geralmente capturados pelo 
interpretador JavaScript. 


a Às strings devem ficar 
cuidadosamente entre aspas 
ou apóstrofos coincidentes. 


P: Os caracteres de escape 
são apenas usados para 
aplicar escape nas aspas e 
nos apóstrofos? 


R: Não, existem vários caracteres de 
escape suportados pelo JavaScript. Por 
exemplo, você pode usar \ t para inserir 
uma tabulação em uma string. Do mesmo 
modo, uma nova linha é representada 
pelo caractere de escape \n. E uma 
barra invertida literal também deve ter o 
escape aplicado com \ \. 


Um lugar onde os caracteres de escape 
podem ser usados com eficiência é ao 
formatar o texto exibido em uma caixa 
de alerta. Você pode usar \t e \n 
para alinhar o texto usando tabulações 
e controlar como ele flui nas novas 
linhas. 


T: Qual é o problema com o 
limite dos caracteres de escape 
nos atributos HTML? 


R: O imite tem relação com o fato de 
que os atributos HTML não estão sujeitos 
às regras do JavaScript, pelo menos 
não quanto aos caracteres usados para 
limiar um valor do atributo. Portanto, 
embora seja bom aplicar o escape em um 
caractere dentro de uma string JavaScript 
que está contida em um atributo HTML, 
ele não pode ser o mesmo caractere 
usado para conter o atributo. 


Se ainda estiver confuso, pense assim. O 
HTML vê um atributo simplesmente como 
um valor que deve aparecer entre aspas 
ou apóstrofos. Nada mais. Portanto, 


Gg Pontos de B la 


m Às aspas € os apóstrofos 
devem ser misturados (mas 
ainda em pares coincidentes) 
nos atributos da sub-rotina 
de eventos HTML que 
contêm o código JavaScript. 


a As caixas de alerta oferecem 
uma opção primitiva, 
porém útil para observar as 
variáveis em um script. 


Não existem 
Perguntas idiotas 


qualquer caractere de limite que você 
usar para iniciar o atributo, o HTML 
assumiria que o próximo encontrado 
será seu parceiro correspondente que 
fecha o valor do atributo. Isso acontece 
porque o HTML não processa o valor do 
atributo para os caracteres de escape 
do JavaScript. 


Os caracteres de escape ainda funcionam 
dentro de um atributo HTML, contanto que 
não entrem em conflito com o caractere 
usado para conter o atributo. É porque o 
valor do atributo, consequentemente, é 
interpretado como o código JavaScript, 
supondo que estamos falando sobre um 
atributo da sub-rotina de eventos. 


P: Não existem depuradores 
mais elegantes para o 
JavaScript que forneçam um 
controle detalhado sobre o 
processo de depuração? 


R: Sim, existem alguns. E não é uma 
má idéia examiná-los mais e considerar 
experimentar um. Contudo, entenda que 
bons hábitos de codificação junto com as 
técnicas de depuração exploradas neste 
capítulo contribuirão muito em ajudar a 
criar scripts sem erro. 


acabe com os erros completamente 


a É um erro comum 
codificar sem querer uma 
condição de teste com = 
quando você realmente 
deseja = =. 


P: O que está acontecendo 
exatamente quando o código 
JavaScript tenta referir-se 
a uma variável ou função 
indefinida? 


R: Lembre-se de que uma variável 
indefinida é uma variável que não foi 
criada ou que foi criada, mas não definida 
para nada. Em ambos os casos, o valor 
armazenado na variável é desconhecido, 
ou mais especificamente, é indefinido. 
Portanto, tentar ler esse valor e fazer 
algo significativo com ele não faz sentido, 
sendo por isso que o JavaScript gera 
um ero. 


Uma situação parecida ocorre com as 
funções quando uma função é chamada, 
mas o interpretador JavaScript não pode 
encontrar uma função com esse nome. 
A função é indefinida, significando que 
chamá-la não faz nenhum sentido — 
não há nada a chamar. Novamente, o 
JavaScript considera-a um erro porque 
não há nenhuma maneira de executar 
de modo significativo o código. 


E Qual é o problema com a 
variável callNum tornando-se 
NaN antes da condição de teste 
if no script de chamadas da 
rádio? 


R: Ainda não sabemos. Embora nos 
informe que algo ainda falta no código do 
script. Portanto, é importante continuar 
investigando mais erros... 
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erro da sintaxe vs. erro lógico 


Conversa informal 


e" 


Erro da sintaxe: 


Ei, ouvi falar de você. Ouvi que você é muito 

sorrateiro. Mas o que estou pensado é se você 
gosta realmente de um script mal escrito tanto 
quanto eu? 


Discordo. Gosto de scripts que são uma 
destruição bem visivelmente. É onde eu 
sobressaio. Você espalha um pouco de mim em 
um script e tem a certeza de fazer um navegador 
sofrer. 


Posso avaliar seu modo distorcido de ver as 
coisas, mas o problema é que você ainda permite 
que um script seja executado. Isso não é bom 
para mim. Gosto de pará-lo em seu caminho. 


Seria, mas infelizmente somos muito limitados 
em termos de quanto dano podemos causar. 
Certamente, é divertido bagunçar uma página e 
impedir que ela funcione, mas detesto não poder 
ter acesso a nada mais. Cara, que diversão eu 
poderia ter com um disco rígido cheio de dados 
importantes! 
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Conversa desta noite: O erro da sintaxe 
e o erro lógico compartilham seu 
amor pelo script ruim. 


Erro lógico: 


Ah, sim. Não há nada melhor do que um script 
que parece bom na superfície, mas fora da vista 
estão todos os tipos de problemas estranhos. 


Mas qual é a diversão? Todos sabem que um” 
ataque furtivo é muito mais eficiente. Você 
sabe, acalmar fazendo pensar que tudo está 
bem e, então, começar a mostrar lentamente 
probleminhas aqui e ali. Se você fizer um 
trabalho bom o suficiente, as pessoas estarão 
perguntando se seu navegador está ou não 
funcionando corretamente. 


Você conseguiu. É uma vergonha eu não ter 
descoberto um bom modo de me mostrar 
parando um script como você faz. Ou melhor 
ainda, danificar o navegador inteiro em uma 
grande nuvem de fumaça. Isso seria legal! 


Ih cara, isso seria incrível. Você está certo de que 
não há um ponto para entrarmos lá? 


Erro da sintaxe: 


Não, o interpretador JavaScript bloqueou-nos 
com muita firmeza. 


Não, como funciona? 


Como você consegue fazer isso? 


Tenho um muito bom que é onde as pessoas 
esquecem de terminar cada instrução JavaScript 
com um ponto-e-vírgula. É ótimo, pois o 
interpretador deixará passar se as instruções 
estiverem em linhas separadas. Mas, finalmente, 
algum programador arrogante tentatá “otimizar” 
o código e combinará as instruções em uma 
única linha, e é quando eu apareço. Esse nunca 
fica velho — sempre consigo rir! 


Adoro porque se o interpretador notar, então 
tenho que entrar em ação e chocá-lo com um 
erro. Ei, estou começando a perceber que 
devemos pensar em nos juntar — acho que 
poderíamos causar muito mais danos assim. 


Estou logo atrás de você! 


acabe com os erros completamente 


Erro lógico: 


Bem, há ainda muita diversão. Eu falei sobre 
meu pequeno truque com = 


É ótimo. O programador deseja digitar para 
comparar dois valores, mas sem querer digita = e 
faz uma atribuição. É hilário porque ficará horas 
sem ver o problema. E o interpretador JavaScript 
não é nada inteligente porque o código ainda é 
legal tecnicamente. 


Ah, tenho muitas maneiras. É um bom caminho 
que percorro estando dentro da lei, mas ainda 
sendo capaz de levantar o problema. 


Ei, isso me lembra mais um que tenho que 
compartilhar. Adoro quando as pessoas decidem 
mudar os argumentos para uma função depois 
de terem escrito a função. Nunca falha — elas 
esquecem de mudar todas as chamadas para a 
função, que devem ser atualizadas para coincidir 
com os novos argumentos. Se tudo der certo, o 
interpretador não notará e elas terão resultados 
inesperados com os argumentos ruins. 


Concordo. Vamos começar!. 
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uma rádio realmente cheia de erros 


Todos somos perdedores! (Erro #4) 


Owen está começando a perceber que este negócio de depuração não é tão fácil 
quanto pensava. Com o erro lógico da instrução if corrigido, agora o script nunca 
declara um vencedor. Portanto, fomos de todos sendo um vencedor para todos, 
agora, sendo um perdedor. A auto-estima de algumas pessoas definitivamente será 
afetada por esse erro se Owen não o corrigir rapidamente. 


Solicitame 3. 


Sriati Parece gre todas Loram de 
* Vencedores a perdedores, 


Isto está realmente confuso. Acho 


uma Vez gue agora ninguém Done que usarei algumas caixas de dlerta 
pode vencer, para experimentar e descobrir 
o que ainda está errado com a 


variável do número da chamada. 


Solicitante 7. 


iste solicitame deve 


ser um vencedor. 
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Dominado por alertas chatos 


Owen tenta usar alertas para colocar uma observação em uma 
variável cal Num e tentar descobrir o que está acontecendo. 
Porém, ele tem o problema de ficar entediado tentando 
prosseguir através de muitas caixas de alerta até o sétimo 
solicitante. Ele tentou usar vários alertas em diferentes partes 
do código, mas apenas conseguiu ficar sobrecarregado com 
tantas janelas pop-up inúteis e não sabe por onde começar... 


NaN 


NaN 


Quando as chamadas chegam em 
grande puambidade, a variável 
callhJum salta embre todos os 
+ipos de valores estranhos. 


Não seria um sonho se houvesse um 
modo de observar as variáveis sem ter 


que passar por uma janela pop-up... 


acabe com os erros completamente 


A desvartagem dos alertas como 
janelas de observação é que eles 
podem ficar chatos quando usados 
no codigo repetitivo, 


A SR AE) 


e 
-| 


undefined 


= E) 
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há um console para isto? 


Os consoles de depuração do navegador podem ajudar 


A maioria dos navegadores tem um console de depuração, na realidade um console 
de erro, que é responsável por exibir os erros que ocorrem em um script. Os 
consoles do erro são muito úteis para descobrir quando algo está errado em um 
script e, em muitos casos, ajudar a diagnosticar exatamente o que deu errado. O 
Firefox, em particular, mostrou ter um excelente console de erro. 


O: 
2º consoles de erra de navegador são 


PE 
Mas para descobrin as emos da script, 
- i 
Especialmente os erros de Sintaxe. ns 


Ui confiamos 
muito no console 
de erro Firefox 
para rastrear 
os erros, 


Os console de erro são 
ótimos e tudo mais, 
mas como eles ajudam a 
observar as variáveis? 


Error: sing before conáion pan 
Soucet. [ai Aa lhe essa 1 


o alo dt average < 30 4 


tres; notas ot setet aÃ 
O T te Lara ia Docs essas ça Lat 


Os consoles de erro realmente não ajudam ao 
observar as variáveis. 


Por mais úteis que possam ser os consoles do erro, eles não oferecem 
nenhum meio de observar as variáveis. Mas há uma boa notícia — não está 
descartada a possibilidade de criar seu próprio console de depuração a partir 
do zero que possa servir como uma janela de observação. 
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acabe com os erros completamente 


Construa um console personalizado para a depuração 


A idéia de um console de depuração personalizado poderia parecer intimidadora 

à primeira vista, mas realmente tudo o que tem que fazer é exibir o texto quando 
solicitado. O segredo é que o console deve exibir as informações da depuração 
diretamente na página, não em uma caixa de alerta. Uma janela pop-up separada 
poderia ser usada, contanto que não requeira que o usuário clique em OK, mas é 
mais simples e eficiente mostrar as mensagens de depuração diretamente na página. 


psi Case 2: Winning Caller 


eeo 
As mensagens de depuração ` 
São exibidas logo abaixo da 
Pagina principal em uma area 
de depuração especial, 


DS SST caller name: - 
callNum: À 
caliNum: 2 
é o ta caliNum: à 
Cada linha é uma caliNum: 


7 JiNum: 5 
mensagem de depuração a 
diferente. 


ego seu Lápis 
E Imagine o design de um console de depuração JavaScript que permita a 


Owen exibir as mensagens de depuração em uma lista dentro de uma área 
criada dinamicamente na página. Desenhe o que você acha que são os 

componentes necessários deste design e como se encaixam, incluindo um 
objeto JavaScript personalizado para o console de depuração. 
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solução inteligente 


Aponte seu Lápis 
Ni Solução 


Imagine o design de um console de depuração JavaScript que 
permita a Owen exibir as mensagens de depuração em uma lista 
dentro de uma área criada dinamicamente na página. Desenhe 

o que você acha que são os componentes necessários deste 
design e como se encaixam, incluindo um objeto JavaScript 
personalizado para o console de depuração. 


O console de depuração É desenhado como 
um objeto denominado DebusConsole com 
uma propriedade e um método, 


Cada chamada para o método display lsg 


DebugConsole > personalizado desenha uma mensigem de 
depuração em uma nova linha da area do 


Z E console de depuração, 


displayMsg () 


r ~ 
O proprio console de depuração 
€ criado na pagina como div. 


A propriedade shaded 
eum booleano gue muda 
emtre true e false 
para cada mensagem 
de depuração para 
alternar a cor do 
segundo plano, 


Os elementos Dentro do console de depuração 
HTL para a área div, cada mensagem de depuração 
de depuração na individual € hospedada em seu 
página são criados dia proprio div filho, 

dinamicamembe 

pelo console $ 

de depuração, ID, 


significando ve a div div 
usuario não Tem gue 

incluir nenhum codigo 

HTUL especial 


para suportar mcallNum: 1º “callNum: 2º “callNum: 3” 
a console de isnat 


depuração, 
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ds acabe com os erros completamente 
<= Imãs de geladeira JavaScript 


O códi, o console de depuração não tem s partes. 
código para o cons pi algumas 


Preencha as para terminar 
a s lacunas com os ímãs do código i truir 
objeto DebugConsole. já pag 28 


gunction Debugconsole( | i 


44 crie a área do console de depuração 


var consoleElem = document - 


consoleElem.id = “debug”; 


consoleElem.style. fontFamily = “monospace”; 


consoleElem.style-color = "433333374 


do cumaBi Bode Jams pec e tom A „a... (consoleElem) ; 


n a a E 


consoleElem. +-+- 


JI crie a propriedade da cor do segundo plano alternatıva 


this. eee = false; 


pobsgêondo ló prototype, displeséas = gunctionimso) i 


/| crie a mensagem 


var msgElement = document. createElement (“div”); 


nsgElenent..appendchi ld (document PRN iodo co (msg); 


gien si Le baaa ronnie = this.shaded ? «4EEEEEE” + “OFFFFFE"; 


yar consoleElem = document .getElementById(. + 


consoleElem.appendchíld(. +--+ 


py Mude à propriedade da cor do segundo plano alternativa 


this.shaded = -+77 this.shaded; 
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solução dos ímãs JavaScript 


Es 
ee y 
S5 


Solução dos ímãs de geladeira JavaScript 
Oc 


o para o console de depuração não tem algumas partes. 
Preencha as lacunas com os ímãs do código para terminar de 
construir o objeto DebugConsole. 


function Debugconsole( ) É 


J crie a área do console de depuração 


var consoleplem = document. [ES 


~ 4 
O console de depuração div € 
„id = “debug”; + anexado ao corpo do documento, 
consoleElem à o eontEanily = “monospace”: A r 
goen à or = 4333333"; o que signi ica gue é adicionado 
consoleElem.style.-c 


ao final da página, 
document body- 
EEE. a 
[pppenachtia | oran R D 
El E 
consoleElem. 


nativa 
propriedade da cor do segundo plano alter! 
crie a 
jJ erii no console de depuração é 


shaded 
[arasen | l = fals A cor do Segundo plano inicia psi régua horizontal ms 
N como false, gue resulta em 


o aa elemema-filho 


this. 


Separar as mensagens. do 
Y 
RS Y ERE RE do resto dapi agim; 


a tmsg) 1 
pebugconsole prototype-displayhes = function (msg! 


Uma mensagem é adia 
4f Crie a mensagem EA e 
r msgElement = document .createElemer t 
va 


janada 
ao console de depuração 


(msg)) 5 


nsgElement .appendchild tdocument 


age EE" 
2 MEEEEEE” : “AFFFF! 

Element style .backgroundColor = tnis.shaded 

msg us 


var consoleEle: 


bi: 
consoleElem,appendcnilá(. 


Å cor do segundo plano 
nativa alterna entr 
edade da cor do segundo plano alternativa alterna entre cada 
|! Mude a propri 


mensagem para gue elas 
1 
sejam mais faceis de ler, 
his. shaded; 
tnis.shaded = Em = 
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acabe com os erros completamente 


Depure seu depurador 


Owen mal pode esperar para colocar à prova o novo console de depuração para 
descobrir o que ainda está errado com o script de chamadas da rádio. Portanto, ele 
importa o arquivo debug.js para a página e cria o objeto DebugConsole no 
início da página. 

<script type="text /javascript"> 
rá y 5 Este codigo cria o objeto DesusConsote 
coma uma variavel global no ímcio da página, 


Infelizmente, as coisas não ocorrem como o planejado. Quando tenta pela primeira 
vez usar o console de depuração, Owen descobre que ele agravou seus problemas 
introduzindo um erro inteiramente novo no console de depuração novo. 


4! Depure a variável global do console 


base) 


Une 7 


Não entendo como o corpo do 
documento não tem nenhuma 
propriedade, Ele não mantém 
todo o conteúdo da página Web? 


AR 

[o navegador está informando 
ig pve o corpo do documento não 
Hem propriedades. Eco pe 
um erro 
inteiramente 
nava foi 
introduzido no 
scriptu vghl 


A linha do código que gera o erro está apenas tentando anexar um nó-filho 
(div) ao corpo do documento, o que não deve ser um problema. 


document .body.appendChild (console); 


Algo mais está faltando, embora definitivamente pareça ter alguma relação 
com o novo objeto DebugConsole. 


Poder do 
cérebro 


O que poderia estar possivelmente errado com 
este código para fazer com que o corpo do 
documento acabe de algum modo vazio? 
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observando o tempo desenrolar-se 


Como aguardar a página 


O problema com o console de depuração tem relação com o tempo de como uma 
página é carregada e quando o código do script tem acesso ao corpo da página. 


A cabeça da pagina é carregada arkes 

do corpo, portamo nenhum conteudo 
h 

da corpo esti disponivel neste pombo, 


| 


Os elementos HTIUL pve residem 

Pig ria 
atualmente na pagina nao são carregados 
ade o corpo ser... depois da cabeça. 


<title>BSI Case 2: Winning Caller</title> 


<script types 


ext/javascript* arcerdetug.)s"></scripr> 


<script types"text/javascript”> 
Variável global do console de depuração 
var console = new DebugConsole(); 


1/9 número total de chamadas 
var callNum = 0; 


checkmianer (forn, caller, vinnin 
/Í Aumente o número da chamada ps 


1) Väzitimia o vencedor 

if (calum == vinningum). | 
alert(caller + *, caller nu do z z N 
Pd mber * + caliNum +", today\'s winnert"); 

1 

else | 
(/ Redetina o sanpo callèr para o próximo solicitant 

var callerField = document .getEl. ent Merry 

callerField.value = “Next caller”; ida 

callerrield- focus); 

cailerrieid.selece (j; 


Ah, então o código do script 
executado no início da 
página não pode acessar os 
elementos HTML na página. 


“fora nane-"callfora” actions*tadiocall php” methoderposte> == 


Sing src=rradio png” altereadior va 
Caller nane: <input idecaller> nagestealier* 

<input type="button” alue="Call*” tip ra 
| oncliokstchecirimmar (chis teca, doa nen 
Unte “SOER, document. getElezentaytdi'callar') .value, 1- /> 


ibody> 
< Pd 


O código JavaScript executado no início da página 


não tem acesso ao conteúdo da página Web. 


Como o início de uma página é carregado antes do corpo, qualquer código 
executado diretamente na cabeça da página deve ter cuidado para não tentar 
acessar nenhum elemento HTML que esteja no corpo da página. Isso pode 
parecer uma restrição estranha, mas faz sentido quando você considera que 
grande parte do código não é geralmente executada na cabeça da página. 
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acabe com os erros completamente 


Mas e as funções que 
aparecem no início? Elas 
também estão erradas? 


Nem todo o código no início de uma página é 
executado na cabeça da página. 


Colocar o código em uma função que aparece no início de uma página 
não é o mesmo que executar o código no início da página — o código 
da função não é executado até que a função seja chamada. Mas o 
código que é colocado fora de uma função é executado imediatamente 
quando o cabeçalho é carregado. Este é o código que pode causar 
problemas. 


No caso do objeto DebugConsole, ele não pode ser criado 
diretamente no início da página porque seu construtor depende muito 
do conteúdo no corpo da página. 


Aponte seu Lápis 


Escreva quando e onde você acha que o objeto DebugConsole deve ser 
criado para assegurar que pode acessar com segurança os elementos na página. 
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solução inteligente 


a Aponte seu Lápis 
Ni Solução 


Escreva quando e onde você acha que o objeto 
DebugConsole deve ser criado para assegurar que 
pode acessar com segurança os elementos na página. 


evento onload, Portanto 


Portaita. i i Aiid J 


r 
O objeta DesugConsole agora é construido 
em resposta ao evento onload. 


Os erros mais desagradáveis de todos: 
da execução 


O problema do corpo do documento descarregado é um fi 
exemplo de erro da execução — um erro que mostra sua face CAUSA de condições 
apenas em certas condições enquanto um script está sendo P 

realmente executado. Algumas vezes, os erros da execução especificas que 

vêm à tona apenas sob circunstâncias muito específicas 


como, por exemplo, certo tipo de entrada do usuário ou ocorrem enquanto um 


Os erros da execução 
9eorrem apenas por 


certo número de iterações do loop ocorrendo. Os erros s 2 

da execução são, em geral, os mais difíceis de todos para ser ipt executado. 

encontrar porque são muito complicados de prever. Algumas 

vezes, é um desafio simplesmente reproduzir um erro da 

execução quando uma outra pessoa o encontra. ds Gerra drakk 

090 Error Console depuração era vm erro 
= a, Ela da E E E da execução causado 

Â Ea Sage por Hentar acessar 


Error: document body has no properties Une 7 os dados antes deles 
O cerie peslier /michasi Documents Meadfirat/shapser) Lissamnisa /aizsdsbua it 


terem Sida carregados, 
que € um problema 
mostrado apenas 
prendo um script é 
executado, 


acabe com os erros completamente 


A tríade do erro JavaScript 


Junto com os erros da execução, os dois outros erros que vimos anteriormente 
completam a tríade do erro JavaScript: erros de sintaxe, erros lógicos e erros 
da execução. Qualquer um deles é capaz de se manifestar em qualquer script, 
geralmente, ao mesmo tempo! Compreender suas diferenças é uma parte 
importante de ser capaz de encontrá-los e erradicá-los com sucesso. 


t 


Erro da execução ET Erro da sintaxe «” 


$ Um erro resultante de uma violação 
Um erro revelado apenas pelas das regras da linguagem JavaScript, 
condições da execução como, por significando que o Ra ao 
ki endo certo i 
e dado: Ts 
a o qual o script não pode lidar ou interpretador JavaScript. 


tentando acessar um objeto antes dele 
ter sido criado ou inicializado. 


cheml> 
chead> 
cxitle>BSI case 


winning Caller</title> 


e=" debug. 33"></ 
pt” src="debug.5 


soript> 


<script type="texe/javaso 


avascript”> 


asor ala de depuração 
ole UD) 


ypesrtexe/5 
«script types 
14 pot 


o missão EStAl de chamadas 
var caliNum = 0: 


Erro lógico ae E 


Um erro causado pela lógica 
ruim, geralmente envolvendo o 
código que deve fazer uma coisa, 
mas sem querer é codificado 


minningum) i 
ritorm, caller, win 
n checkWinne: 


unctio anie 
fonction teo número da chanad 
far canina: 

“cation; EN 


e displaytsg (“calmani ` + = 
Algum alguma outra coisa, console.display™s 
es encedor p 
aes AEA ó 4! Verifique um vi Es A cs 
esa £ aieo Taa ig (cailNum = winningNum) t n TA. e 
“ecutado exatamente como 


% er nunber 
aterticaller + “4 call 


form. submit (); 


O pretendido, neste caso o 
Programador compreendeu mal a 
tarefa com a qual começar. 


Exercício Escreva o tipo de erro para cada uma das seguintes descrições do erro. 


Parêntesis faltando em torno da condição de teste de uma instrução if. 


Esquecer de inicializar uma variável do contador para 0. 


Criar um loop que faz loops além do último elemento em um array. 


Esquecer de fechar uma função com uma chave de fechamento. 
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solução do exercício 


Escreva o tipo de erro para cada uma das seguintes descrições do erro. 


Solução do 

Exercício 
Parêntesis faltando em torno da condição de teste de uma instrução if. 
Esquecer de inicializar uma variável do contador para 0. 


Criar um loop que faz loops além do último elemento em um array. 


Esquecer de fechar uma função com uma chave de fechamento. 


O número da chamada está 
aparecendo como “não é um 
número”. Isso é muito estranho... 


Não é um número — bah 


Com o console de depuração finalmente funcionando, agora é 
o possível dar uma olhada na variável ca 1 1Num quando as chamadas 
chegarem sem ter que analisar através de todos aqueles alertas. E 
como resultado, um antigo problema que Owen ignorou finalmente 
voltou-se contra ele. A variável cal INum está aparecendo como 
NaN, que significa que não é um número. Mas por que não é? 


console.displayMsg (“callNum: “ + callNum); 


Uma Única linha de 
código define uma nsi 
observação na 5 
chamada callum 


calinun: 
caliNum: 


Pelo menos o console 

~ ` 
de depuração A 
funcionando! 
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acabe com os erros completamente 


Quando observar não é suficiente 


Algumas vezes, observar uma variável cria mais perguntas do que respostas. Por 
que cal Num não é um número? Por que não está sendo aumentada? Qual é a 
finalidade deste console de depuração se apenas confirma o que você já sabe... que 
há um problema. Portanto, como iremos descobrir especificamente o que é? 


E agora? 


o número da chamada 
mudar de valor. 


Remover o código é uma ótima 
maneira de simplificar um script 
enquanto caçamos Os erros. 


Algumas vezes, menos é mais ao depurar o 
JavaScript. Neste caso, remover o código e observar 
para saber o que muda é uma idéia excelente. Mas 
simplesmente apagar o código não parece atraente, 
uma vez que a maioria permanecerá como está 
quando você tiver terminado de depurar. Realmente 
precisamos de um modo de desativar o código, em 
oposição a removê-lo de fato. 
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incapacitado pelos comentários 


Comentários como desativadores temporários do código 


Ocultar o código executável dentro de comentários é um modo extremamente útil 
de desativar o código ao depurar. Isso permite ao código ser retirado seletivamente 
da execução de um script sem, de fato, apagar o código. Pense em comentar 
o como um meio de subtrair as linhas ou as partes do código quando 


Os comentários 
são extremamente 
úteis para desativar 
temporariamente o 


código. 


necessário para ajudar a isolar um erro, 


ion checkWinner (form, caller, winningNum) 
sole.displayMsa(“callNum: * + callNum) : 


número da chamada 


++calinu 


\ 


/| verifique um Yencedor 
if (callNum == WinningNum) ( 3 M subs 
alert (caller +|", caller number * + callNum + *... today 


winner!”) 5 
form. submit () 

à | 

e | ~ 

E ampo caller para o próximo solicitante 


// Redeñina o licitante 
var callerFibld = document .getElementById(`caller’); 


callerrield/value = “Next caller”; 
callerFielá. focus (); 
callerFigfd.select (); 


Ei, o número da chamada agora 
está aparecendo como 0. Então, 
algo no código desativado está 
transformando-o em “não é um 


Este comembária com 
diversas linhas desativa 
tudo na Função, exceto 

o codigo que exibe a 
mensagem de depuração, 


callNum: 0 — 


callNum: 
Acari 2 Fa 
callNum é O, que callNum: 6 
Significa gre algo no 
codigo desativado 

esta bagunçando-a, 


Poder do 
cérebro 


O que você acha que acontecerá se apenas a linha de código 
que aumenta o número da chamada for adicionada de volta? 
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acabe com os erros completamente 


Problema resolvido... mais ou menos 


Mudando para os comentários com uma linha, fica possível ser mais seletivo no 
código que é desativado. Se a linha do código que aumenta a variável callNum 

for adicionada de volta, a variável callNum começará a funcionar como deveria. 
Portanto, uma das linhas restantes do código desativado está causando o problema. 


Os comentarios com uma 
linha são usados para 
se linhas individuais 
possam ser ativadas e 


desativadas, e 


function checkWinner (form, 
ec » caller, winningNum) 
console. displayisg ("calinam: < + salimur 


// Aumente o número dá chamada 


4 
44 vaz caninum; CC Cancelar o comentario da linha de 
++callNum; — j jo 
cal INum; codigo que aumenta Linalmente 

th, verifique um vencedor faz a variavel callum funcionar, 
KA if (callNum == winningNum) ( 
tt alert {caller + “, ci m * 
Pa + caller number “ + callNum +“... today\'s 

(=) 


eee BSI Case 2: Winning Caller 


ra o proximo solicitante 
ft .getElementById(“caller'); 
caller”; 


A variavel callum 
finalmente funciona 
como deveria, 
aumentando em cada 
chamada. 


e fronto seu Lápis 
Escreva o que está errado com o erro callNum no console de depuração, 


junto com sua correção. 
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solução inteligente 


Aponte seu Lápis 
a Solução Escreva o que está errado com o erro callNum no 


console de depuração, junto com sua correção. 


usando var dentro da função checkWinmerC ), Portanto, a variavel local callum 


4 E 
da, aumemba-la e, enfi 


// Aumente o número da chamada 


—var-eatiNum— 


++calINum; 


Os perigos das variáveis shadow 


O erro cal 1Num no script de chamadas da rádio é 
um exemplo de variável shadow, que é uma variável 
que oculta sem querer outra variável com o mesmo 
nome. O problema surge quando uma variável 

local é criada com o mesmo nome de uma variável 
global. O JavaScript cria a variável local e fornece 

a precedência no bloco local do código. Portanto, 
qualquer alteração feita na variável local não vai para 
a variável global — a variável local lança, de fato, uma 
sombra (shadow) sobre a variável global, ocultando-a 


s "N p 
temporariamente do script. Variável 


global. 


4 
Variave! local, 
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Kemovendo a linha do código que 
cria sem gueren uma variavel local 
chamada callhJum, a função vsa a 
variável callNlum global, coma foi 
pretendido originalmente, 


Uma variável shadow 
ocorre quando as 
variáveis locais e globais 
são criadas com o mesmo 
nome... nada bem! 


Código local 


Código globai 


Éste código aumenta 
a variavel global, 
resultando em C. 


íste codigo aumerta a 
variavel local, resultando 
em/-a variavel global e 
encoberta e permanece 
inalterada. 


acabe com os erros completamente 


Não existem 
Perguntas Ídiotas 


P: Ao comentar o código para controlar os 
erros, como sei quanto código desativar? 


R: Este é um julgamento que você saberá melhor quando 
tiver mais experiência com a depuração JavaScript. Porém, 
nunca é errado enganar-se ao desativar mais, se não todo o 
código próximo de uma área problemática de um script. E se 
um problema realmente desagradável surgir, não hesite em 
desativar todo o código do script em uma página. E também 
não se esqueça de remover temporariamente qualquer tag de 
importação que coloca um código externo na página. 


Há outra abordagem que poderá funcionar se você já isolou 
um erro em uma determinada seção do código do script. Essa 
abordagem envolve desativar uma linha de código de cada vez 
até que o erro desapareça. Portanto, ao invés de desativar 
tudo e ativar lentamente o código até o erro aparecer, você 
desativa lentamente o código, uma linha por vez, até que o 


Caso encerrado! 


erro desapareça. A primeira abordagem funcionará melhor 
se você não tiver noção sobre onde um erro está localizado, ao 
passo que a última funcionará melhor se tiver isolado o local 
do erro em algum grau. 


P: E se eu quiser criar uma variável shadow? 
Tudo bem? 


R: É como perguntar se você pretende quebrar sua pema, 
tudo bem? E a resposta é não. Só porque você deliberadamente 
causou problemas e sofrimento para si mesmo, não toma isso 
aceitável. Além disso, há muito dano para resolver ao depurar 
o código que deve funcionar perfeitamente, portanto não deve 
atirar até o fator de risco deliberadamente. Assim, a resposta 
real para a pergunta é que as variáveis shadow introduzem 
tanta confusão e incômodo no código JavaScript que elas 
devem ser evitadas em todas as situações. 


Com uma dose saudável de paciência e alguma ajuda de suas novas 


habilidades de depuração, Owen encerra o caso e embolsa uma promoção 


para ser um Detetive JavaScript nos Investigadores da Cena do Erro. 


o) so. BSI Case 2: Winning Caller 


(==) 


Detetive Owen; 


callNum: 

callNum: 

callNum: 
2 


sausunh 


O script de chamadas da rádio 
semerros esta completo comum 
console de depuração que funciona, 


Alan, caller number 7...today's winner! 


o investigador 
da depuração 
Uavaseript 
acimpembado. 
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uma lista de verificação prática e de primeira 


Lista de verificação para dar fim aos erros 


*Certifique-se de que os parêntesis estejam sempre em pares coincidentes. 


*Certifique-se de que as chaves em torno dos blocos de código estejam sempre 


em pares coincidentes - o recuo cuidadoso do código aj uda a coincidir os pares 


de chaves. E- 


— |  "Tenteevitar os erros tipográficos nos nome do identificador - as variáveis e as 
funções poderão causar grandes problemas se seus nomes não forem usados 


com consistência. 


*Sejaconsistente como uso. das aspas e dos , apóstrofos, e misture os dois com 


cuidado nos atributos HTML, se necessário. 


especialnas strings, como, por exemplo, uma aSpa (Nou um apóstrofo (V). 


* Nunca, jamais, use = quando quber ==. Provavelmente, o JavaScript não o verá 


como um erro, mas seu código não funcionará como o pretendido. 


RE m 


‘Certifique-se de que um objeto tenha ido criado antes de tentar acessálo- 
iso se aplica basicamente aos elementos da página Web, que não são criados 
até um pouco antes do evento onloadser inicializado. 


* Nuncanomeie as variáveis locais e 9 obais com o mesmo nome, pois a variáve 
localencobrirá a global, resultando em algum comportamento muito imprevisi vel. 


© 
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acabe com os erros completamente 


CHEN me 


Dobre a página na 
vertical para alinhar O que merecem todos os 


os dois cérebros e k 
resolver a charada. exros Ji avaSexipt? 


4 
8 < tum encombro de mentes! < É) 


a 


Caso encerrado! 


hj = done 
o a 
A 
* 


Dar a outra face é uma abordagem 

errada que pode sobrecarregar sua 
tolerância aos erros. À repulsa 

geral pelos erros causará uma 

debilitação em seu código, o que é 

um problema. 
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12 dados dinâmicos * 
Aplicativos Web 
sensível ao toque 


* 


Não deixe que seus olhos enganem 
você. Por trás deste rosto bonito 
existe um sentimento selvagem, apenas 
esperando para sair. Na verdade, 
minha personalidade dinâmica é meu 

maior trunfo. 


A Web moderna é um lugar responsivo onde as páginas devem reagir 
a todo capricho do usuário. ou pelo menos este é o sonho de muitos usuários e desenvolvedores 
Web. O JavaScript desempenha um papel vital nesse sonho através de uma técnica de programação conhecida como Ajax 
que fornece um mecanismo para mudar drasticamente a “impressão” das páginas Web. Com o Ajax, as páginas Web agem de 
modo muito parecido com os aplicativos desenvolvidos, uma vez que são capazes de carregar e gravar rapidamente 
os dados de modo dinâmico enquanto respondem ao usuário em tempo real sem nenhuma renovação da 
página ou artifício do navegador. 


quero mais... dados dinâmicos 


Ansiando por dados dinâmicos Adicionar novas 


Lembra de Ruby, a apaixonada por quebra-cabeças de cubo e 

blogger? Ruby adora seu blog YouCube acionado pelo JavaScript, entrada do blog ao 
mas ela está frustrada por ter que editar o arquivo HTML para Y x 

a página inteira só para adicionar algumas entradas novas. Ela Y'ouCube não deve 
gostaria de ser capaz de separar, de algum modo, as entradas do fa m Bocão 
blog do código HTML que descreve a página do blog, liberando-a requerer a edição 


para se concentrar no conteúdo do blog em si. da página Web. 
o 


e — a 
YouCube - The Blog for Cube Puzzlers 


peT T 


ed last night a huge cube was chasing me, and it kept yelling my 
er Ruby 


Eu realmente gostaria de 
ser capaz de adicionar novas 
entradas do blog sem ter que 
editar o código HTML. 


name backwards.. Ybur! 


Wow, it took me a month but the new cube is finally solved! 


E bioa a aa 
E ninine ceu 


77 Berta to fara 
A istma (Ota! blog 
Sieg o? 


hise ge logical order (most recent first) 


ræv bote(-0871972000" 
"88/16/2006" NAME) 


/ 


/ Alicionar uma nova embrada do blog reguer 
AÀ blogger Lrustrada e gue Kuby edite o arguivo HTIUL para a 
sonhadora de cubos, Kuby. página Web YavCube. 


| 
| 
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Um YouGube baseado em dados, ~= = os arguivas de Kuby para 


as páginas baseadas em 
dados estão dispamveis 
em www abtabaoks.combr, 


Ruby está ciente de algo. Uma versão de seu blog que separa o conteúdo do 
blog da estrutura da página Web envolve dados dinâmicos, dados que são 
fornecidos em uma página dinamicamente quando a página é processada 
pelo navegador. As páginas Web, construídas a partir de dados dinâmicos, 
são conhecidas como páginas baseadas em dados porque a página 
realmente define apenas uma estrutura que é preenchida pelos dados. Em 
outras palavras, os dados são encarregados do conteúdo da página. 
Os dados do blog são armazenados emum argui: 
separado fisicameme que pode ser editado nd 


+ocar na página Wes. Dados do blog 


o 


Página Web 


(9) VavaSeript é 
A página Web comem o c ôdiza responsavel por y 
HTL para a estrutura processar as, dados do 
ágio s blog € combina-los em uma 
da pagina Web mais o codigo HTUL. final 
Uavaseript peraincorporar P'I”* Web inal. 


o. Pi 

Per Gii u a Com a ajuda do JavaScript, os dados brutos do blog são 
mesclados dinamicamente com o código HTML para gerar uma 
página YouCube final que parece idêntica à original. Mas essa 
página baseada em dados é montada a partir de partes separadas: 


ks ~ 
A E á ão ss ra a página estrutural e os dados do blog. Com os dados do blog 
Dart 4 E separados em seu próprio arquivo, Ruby está livre para manipular 
PRE RO RASTA o conteúdo do blog separado do código HTML, CSS e JavaScript 
SPURA para a página Web. 
a Ruby Hem apenas que editar este 


arquivo para atualizar seu nava blog 
baseado em dados, N 


blog.xmt 
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mais vale prevenir do que remediar 


Os dados dinâmicos parecem 
bem complicados. Aposto que 
eles requerem muito código 
JavaScript confuso, certo? 


elegante chamada Ajax. 
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Os dados dinâmicos requerem um pouco 
mais de esforço de codificação direto, mas 
valem muito a pena no final. 


Embora uma página conduzida por dados dinâmicos certamente 
requeira algum planejamento adicional e esforço direto, vale 
muito a pena, a longo prazo, com atualizações rápidas e fáceis 
das páginas. E mais, o JavaScript tem um suporte predefinido 
para os dados dinâmicos graças a uma técnica de programação 


dados dinâmicos 


fia, ár a . - 

O Ajax é só comunicação O Ajax permite a 
O Ajax torna possível os dados dinâmicos permitindo “conversas” Z 

diik e0 o Nave iaoe Web do cliente toann We: Mas WA, Pag INA Web 
especificamente, um script é capaz de pedir ao servidor alguns dados r 

como, por exemplo, uma coleção de entradas do blog, e o servidor eceber dados 
envia-os usando o Ajax. Então, o script obtém os dados do blog e 


incorpora-os dinamicamente na página. dinamicamente 
a partir de um 

olicita dados 

epa servidor Web. 


Web do cit 
À página Wes usando ð Ajax. 


do blog ao servidor 


O cliembe inicia uma 
solicitação Ajax 

e então, aguarda 
uma resposta, 


O davaScript serve 
como um intermediário, 


iniciando à solicitação, N} 
lidando com a resposta 
e incorporando os dados LŚ 


na página Web, 


Navegador Wes, 


youcube.html 


O servidor 
responde enviando 
as dados do blog 


O servidor recebe 
a solicitação e 


blog.xmi 
responde com os 
para o cliente. dados do blog. 


ho de a resposta 
do servidor, o cliente 
obtém os didos do blog 
€ adiciona-os à página 


Poder do 
cérebro 


O que “XML” significa no contexto dos dados do blog? Como 
instambaneamente, semum você acha que ele ajuda com os dados dinâmicos? 


recarregamento E Página. 
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um html com qualquer outro nome 


Um HTML para tudo: XML XML é uma linguagem 
O “ML” em HTML significa linguagem de marcação e a 

refere-se ao fato de que o HTML usa tags e atributos para de marcação usada para 
criar hipertexto (“HT”). Assim como o HTML é usado para mu 

criar páginas Web de hipertexto, o XML é outra linguagem formatar qualquer tipo 
de marcação usada para criar, bem, qualquer coisa desejada. 

É isso que o “X” significa — qualquer coisa! A idéia é que de dados. 

há todos os tipos de dados que poderiam aproveitar o fato 

de serem armazenados como tags e atributos. Portanto, por 


que não estender o alcance das linguagens de marcação para AU a 
resolver os outros problemas dos dados? 


Pagina Wes 


Transação da compra 


4 
Lista de músicas 


bmbradas a e a n 


do blog 


sp a teats eE 


E a cm 
O que torna o XML tão poderoso é sua flexibilidade. Diferente SET 
do HTML, que tem um conjunto fixo de tags e atributos, o ps 
XML não define nenhuma tag ou atributo — apenas define as 
regras sobre como as tags e os atributos são criados e usados. 
Cabe a cada aplicativo do XML, em particular, explicar as 
particularidades das tags e dos atributos que representam os 
dados específicos. 
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le sn a ps Pe tt 


dados dinâmicos 


O XML permite colocar tag em SEUS dados do SEU jeito 


O verdadeiro encanto do XML é que ele pode transformar qualquer pessoa em um 
criador de tags personalizado usando um pouco da alquimia das tags e dos atributos 
para inventar uma linguagem de marcação inteiramente personalizada para qualquer 
finalidade. Existem, certamente, muitas linguagens XML existentes que já foram criadas 
para resolver muitos problemas diferentes e não será uma má idéia usar uma delas se ela 
se adequar às suas necessidades. Mas criar uma linguagem de marcação personalizada 
própria é uma tentação difícil de resistir. 


Parecido com o codigo HTIAL , este codigo XML 
ch 3 rå 


pm consiste em uma hierarquia de elememtos. 


4 

canin ce co EES Cada aspecto do filme € 
armazenado em sua propria 
tas exclusiva, 


skateboarder investigates the death of his adopted brother ESMMENA 


<Jmovio> Do Ga — AD 
Os detalhes do filme estão, 


contidos na Fag <movie>, 


Mesmo que você nunca tenha visto esta linguagem de marcação XML de exemplo, 
que é inteiramente personalizada, as tags descritivas tornam possível decifrar 

os dados. Mais importante ainda, as tags são muito específicas para os dados 

que sendo armazenados — simplesmente faz sentido usar uma tag denominada 
<director> ao armazenar o diretor de um filme! 


Coincida as seguintes tags com suas descrições e, então, escreva ao lado de 
cada descrição se a tag é HTML ou XML. 


Exercicio 


<itunes:author> O texto em negrito em uma página Web. 
<span> O útulo de um newsfeed on-line. 
<title> Um controle de entrada em uma página Web. 
«e. <strong> O texto que é convertido em conversa para quem faz a chamada telefônica. 
. <input> O artista de um podcast iTunes. 


<prompt> O conteúdo em linha em uma página Web. 
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solução do exercício 


Coincida as seguintes tags com suas descrições e, então, escreva ao lado de 


cada descrição se a tag é HTML ou XML. 


Exercício 
Solução 
XML. citunestauthor> O texto em negrito em uma página Web. 
XUL. <span> = O título de um newsfeed on-line. 
XUL, <title> Um controle de entrada em uma página W 
MC. <strong> O texto que é convertido em conversa para quem faz a chamada telefônica. 
XUL. cinput> O artista de um podcast iTunes. 
XUL. cprompt> O conteúdo em linha em uma página Web. 


XML é apenas texto 


Parecido com o HTML, os dados XML são apenas texto, o que significa 
que são armazenados em um arquivo de texto normal. Porém, os arquivos Os dados XKAL são 
XML são nomeados com uma extensão de arquivo .xml, em oposição às 
extensões .html ou .htm usadas nos arquivos HTML. 


geralmente armazenados 
em arquivos com uma 
extensão de arquivo xml. 


Então, a versão baseada 
em dados do YouCube pode 
ser atualizada editando um 
documento XML... legal! 
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dados dinâmicos 


XML + HTML = XHTML O xHTML é 


Podem ter extensões de arquivo diferentes, mas o XML e o HTML têm ~ 

uma conexão muito importante e ela é chamada de XHTML. O XHTML UMA Versão 

é uma versão moderna do HTML que segue regras mais rígidas do XML. 

Por exemplo, toda tag de abertura em uma página Web XHTML deve do HTML que 
ter uma tag de fechamento. O HTML é irresponsável com sua sintaxe, 

significando que você pode escapar sem combinar as tags como, por seg ue às regras 
exemplo, <p> e </p>. O XHTML não é tão bondoso e requer que tais de sintaxe mais 


tags sempre apareçam em pares coincidentes. 
rígidas do XML. 


HTML XHTML 
Este é um parágrafo de texto no HTML.BBS feste é um parágrafo de texto no xum. BE 
4 
A Hag <p> geralmente é usada A As tags com conteúdo sempre A 
sozinha no codigo Hrul para devem aparecer como pares 
indicar o inicie j incidembes no XHTIAL. 
indicar o imcio ou o final de um coince: na ” 


paragrafo. 


Outra diferença importante entre HTML e XHTML envolve as tags vazias, como 
<br>, que devem ser codificadas com um espaço em branco e, então, uma barra 
no final para indicar que não há nenhuma tag de fechamento. 


HTML XHTML 
Esta é apenas uma frase ABES Esta é apenas uma frase BENS 
A Hag da quebra de linha vazia O espaço e a barra são regueridos en | 
é geralmente codificada no Hodas as tags vazias no XHTuL. 


TIL sem yma barra. 


Mais uma distinção importante entre HTML e XHTML é que o XHTML requer 
que todos os valores do atributo fiquem entre aspas. 


HTML XHTML 
<a href=HGMENHEMI>vs para casa</a> <a href=" AMS >vá para casa</a> 


O valor do atributo não está entre Todos 05 valores do atributo XHTIAL 
aspas, o que viola as regras do xHruL. devem aparecer entre aspas, 


Embora o XHTML não atue diretamente nas necessidades imediatas de Ruby em 
termos de modelar os dados do blog no XML, ele esclarece algumas das regras de 
sintaxe mais importantes do XML, que se aplicam a todas as linguagens baseadas na 
XML, inclusive a linguagem de dados do blog personalizado de Ruby. 
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XHTML vs. XML 


Conversa informal 


e 


Conversa desta noite: HTML e XML 
informam sobre os dados Web 


A vrtima versão do HTIAL tor 
reformulada usando o XIL e é 
chamada de XHTML. 


XHTML: 


Você sabe, você deixou as coisas realmente 
confusas para mim. Aqui, sou a estrutura da Web 
e, agora, muitas pessoas estão confusas sobre 
mim, graças a você. 


Mas você ainda não é bom sem mim porque os 
navegadores exibem apenas o código HTML. 
Eles nem sabem o que fazer com você. 


Como é possível? Quem liga para dados sem 


aparência? 


Tudo isso pode ser visto graças a mim — está tudo 
lá na Web. 


Entendo. Então, você está sugerindo que 
realmente trabalhemos juntos? 
Isso é um grande alívio! 
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XML: 


Não minha culpa que você tenha uma visão 
estreita, sempre pensando nas página Web. Eu 
ampliei a minha mente e fazendo isso, posso 
representar qualquer tipo de dado. 


Ei, sou um cara misterioso. A verdade é que sou 
um homem sem face — todo substância e sem 
aparência. Preciso de você quando é hora de me 
mostrar. 


Opa, você realmente não sai muito, sai? O resto 
do mundo opera nos dados que não podem 

ser vistos na maioria das vezes. Transações 
bancárias, apuração de votos, condições do 
tempo, você sabe. 


É verdade, mas como você acha que tudo 

é armazenado antes de ter sucesso em um 
navegador Web? Não como parágrafos e tabelas, 
posso adiantar. Geralmente é armazenado 
usando-me porque forneço muita estrutura e 
contexto — eu torno os dados fáceis de serem 
processados. 


Absolutamente! Não tenho nenhuma idéia de 
como ficam os dados. Na verdade, concentro- 
me no que eles significam. Contanto que as 
pessoas continuem usando os navegadores Web, 
continuarei a precisar de sua ajuda para exibir os 
dados que represento. 


dados dinâmicos 


XML e dados do blog YouCube 


O XHTML é um ótimo aplicativo do XML que está melhorando rapidamente 

a estrutura e a confiabilidade das páginas Web. Em relação ao blog YouCube, 
porém, Ruby precisa de uma linguagem XML personalizada que modele os dados 
específicos de seu blog, Isso requer avaliar os dados diferentes requeridos do blog e 
considerar como poderiam se encaixar no contexto das tags XML hierárquicas. 


<blog> 
<title> O rena empreses 


<author> Blog.prototype.signature = “SWNBNZENSEIRUNS; 
<entries> 


<entry> 
<date> — blogl0] = new Blog (SSENEHENHENTENENSFasEEa Ens nana assa. 


Aponte seu Lápis 
~ ente sua própria linguagem XML para armazenar um blog e use 


a linguagem para codificar uma entrada do blog, Os itens como 
título, data, autor e a própria entrada devem ser considerados. 


</blog> 
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solução inteligente 
Aponte seu Lápis 
Ni Solução 


3 &lop> 
O blog imeiro 
esta comido 
na Fag <blog> 


Asus ae 
embrada do blog 
E armazenada ma 


Hag <embries>, 


</blog> 


L Cada entrada do blog é 
2 EP perermelnde aee 


Invente sua própria linguagem XML para armazenar um blog 
e use a linguagem para codificar uma entrada do blog. Os 
itens como título, data, autor e a própria entrada devem ser 
considerados. 


embryo: ebreaia 


Jags respectivas. 


Não existem 


Perguntas Ídiotas 


P: Por que não armazenar os dados do 
blog simplesmente como texto comum sem 
formatação? 


R: Você poderia, mas então colocaria uma carga enorme 
no código do script para examinar os dados e tentar dividi-los 
em entradas do blog separadas com suas próprias datas 

e corpos. O XML adiciona uma estrutura previsível aos 
dados para que você possa distinguir facilmente os campos 
separados de dados como, por exemplo, as entradas 
exclusivas do blog com suas próprias datas e corpos, sem 
mencionar o título e o autor do próprio blog. 


P: A tag <entries> realmente é necessária 
nos dados do blog XML? 


R: Não é estritamente necessário, mas toma o formato 
dos dados mais estruturado e fácil de entender. Por 
exemplo, sem a tag <entries> nos dados do blog 
anteriores, seria impossível dizer que o formato do blog é 
capaz de suportar diversas tags <ent r y>, mas apenas 
umatag<title>e<author>. Atag <entries> 
implica que há uma coleção de diversas entradas do blog, 
que fomece aos dados mais estrutura e torna mais óbvio o 
modo como os dados devem ser usados. 
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P: Qual a ligação entre XML e Ajax? 


R: 0 Ajax já toi tido como sendo um acrônimo para 
Asynchronous JavaScript And XML, portanto XML esteve, 
em algum momento, diretamente ligado ao Ajax. Esse 
acrônimo agora é considerado passado, pois o papel do 
Ajax aumentou para nem sempre requerer o XML como 
parte da equação. Mas a realidade é que o XML ainda forma 
a base da maioria dos aplicativos Ajax porque fomece um 
Ótimo mecanismo para modelar os dados. 


Como descobriremos mais tarde no capítulo, há uma 
conexão entre o Ajax e o XML no modo como o JavaScript 
suporta o Ajax. O JavaScript não o impede de usar o XML 
como um formato de dados para executar as solicitações 
e as respostas Ajax, mas as torna muito mais fáceis ao 
lidar com tudo, exceto o mais comum dos dados. Portanto, 
embora os puristas Ajax possam reclamar que o XML e o 
Ajax não têm nenhuma ligação real entre si, em termos 
práticos eles geralmente andam de mãos dadas. O antigo 
acrônimo ainda ressoa a verdade grande parte das vezes, 
mesmo que tenha sido desaprovado. Iremos explorar a 
parte “assíncrona” do acrônimo um pouco mais tarde. 


dados dinâmicos 


Ainda não entendo. Como os dados 
armazenados em um formato 
especial tornam-se dinâmicos? 


O XML sozinho não é dinâmico, mas ele se 
entrosa muito bem no Ajax e no DOM. 


O XML é o formato de dados mais usado com o Ajax e, portanto, 
é o candidato lógico para representar os dados do blog que serão 
enviados do servidor para o cliente na versão baseada em dados do 
YouCube. É a natureza altamente estruturada do XML que o torna 
tão ideal para mover os dados. 


E a semelhança do XML com o HTML (XHTML) torna possível 
usar o DOM para acessar os dados XML como uma árvore de 

nós. Isso significa que você pode escrever o código JavaScript 

que percorre a árvore de nós XML, isolando com cuidado os 

dados desejados e, então, incorporando-os em uma página Web 
dinamicamente. São todas essas coisas e muito mais que tornam o 
XML uma ótima solução de armazenamento de dados para construir 
páginas dinâmicas baseadas em dados. 
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como adicionar o ajax 


Como injetar o YouCube com o Ajax 


Com um novo documento do blog XML brilhante em mãos, Ruby está pronta para 
carregá-lo dinamicamente na página YouCube com a ajuda do Ajax. 


Como exatamente o Ajax 
permite aos dados XML serem 
carregados dinamicamente em 
uma página Web? 


O servidor recebe a 
solicitação e começa 
a trabalhar criando 
uma resposta. 


A solicitação 
é e nome do 
arquivo XML 
comendo os 
dados do blog, 


A solicitação 
O Ajax gira em torno do conceito de solicitações e 
respostas como um meio de realizar a comunicação 
dos dados entre o navegador do cliente e o servidor. 


ssa cos elos fo Comes ooo O 


VouCube - The Blog for Cube Puzzlers 


O navegador envia 


a solicitação para o 
servidor e aguarda 


uma resposta. 


Antes de enviar a solicitação Ajax, 
a pagina Web não Fem os dados do 
blog e, portanto, não é capaz de 
PAP RA as entradas do blog. youcube.html 
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(3) O conteúdo inteiro 


O servidor cria uma do arquivo do blog 
resposta para o navegador XML é retornado 
colocando os dados no na resposta Pijax, 


arquivo do blog. 
six | Rin 


A resposta 


Um script no lado do servidor (não 

Vaya Script algumas vezes é reguerido 

para processar as solicitações Pljax e 

preparar os dados da resposta, ese. Yosuke -The Bog for Cuba musa 


YouCube - The Blog for Cube 


O navegador retira 
os dados XML na Seta op 
resposta e incorpora- Taa aE a hage cube was chasing me, and pe yelling my name cr Yu! 


os cuidadosamente paes 


Wow, took me a manths but the new cube is finally solvad! 


na página Web. 
by Puzder Ruby 
saasa 
GOLE Ben TAT cabe: Could be my kie biog po fera wite- / 
Amended a rally outside ı ia i i 
Aly ond local ty st 
Assim gue os dados —— tri a pp 
poe sasaaa 
xual E = Ag e wik me flow ouben to cs de ppa a 71717 cube. Mt 
código ITHAL da pagina Sr A Bog es | era Random Bog tavy | 


Desa 


Wes, eles podem ser 
vistos no navegador. 


o codigo UavaScript 
responsável por criar 
Poder do a solicitação Ajax e K 

lidar com a resposta e 


AIS executado dentro da 
7 
Qual tipo de código JavaScript você acha que é pagina Web, oy 


responsável por trabalhar com as solicitações e as 
respostas Ajax? 
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a parte JavaScript da equação 


JavaScript para o resgate do Ajax: 
XMLHHpRequest 


O JavaScript inclui um objeto predefinido chamado XMLHttpRequest 
que é usado para iniciar as solicitações Ajax e lidar com as respostas Ajax. 
Esse objeto é bem complexo, contendo vários métodos e propriedades 
diferentes que trabalham junto para suportar o Ajax. 


readyState 

O estado numérico da solicitação: O (não. 
inicializado), 1 (aberto), 2 (enviado), 3 
(recebendo) ou 4 (carregado). 


pi 
y 
/ 


status 

O código de status HTTP da 
solicitação como, por exemplo, 404 
(não encontrado) ou 200 (OK). 


Hi alguns outros métodos 
e propriedades no objeta 
XML HtpRegues +, mas estes 


são artes partidas 


abort( ) 
Cancela a solicitação 
) 
V 
V Este metado será usado 
XMLHttpRequest apenas se a solicitação Ajax 


precisar ser cancelada. 


Éstas dvas propriedades 
armazenam os dados 
retornados pelo servidor wèy 
p oa Teespensena. Pra ua olciação 
especificando seu tipo e 
URL, entre outras coisas. 
onrendystatechange iadi i 
ma referê: fu e 
E eaea Envia a solicitação parao <— {otes dais métodos 
estado da solicitação muda. ani a e +rabalham juntos para 
A Her uma solicitação Ajax 


\ 


Esta propriedade É única no sertido 
de que mambém uma referência para a 
sub-ratina de everts personalizada 
gre e chamada guando o estado da 
solicitação Ajax muda - € nesta 
função da sub-rotina de eventos que 
a resposta € processada, 
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pronta e, embão, envia-la 
K pera o servidor, 
responseTex: 
a 
retornados do servidor, como 


i de fento comam; | Estas duas propriedades 


jentas podem ser usadas para 
determinar se a solicitação Ajax 
responseXML +erminov com uma resposta valida, 
Os dados da resposta 
retornados do servidor, como 
um objeto consistindo em 
uma árvore de nós XML. 


dados dinâmicos 


O XMLHttpRequest é muito complexo O objeto 


dé é i é 
coprendenemte fetel Mas com ese podere fexbiidadevem XMLHttpRequest 
Ar gua n de bio James To é gas E 
Ecs opgõe iN passar o comporameto do oija TAMIDÉM HH poco 
pos rs nn doe me poi At] le pa 


Como exemplo, considere que o seguinte código seja necessário apenas © cd, digo Hem ge 


para si um objeto XMLHttpRequest que funcionará em vários +emtar algumas 
navegadores: 

ga abordagens diferentes 
var request = null; h red 
if (window. XMLHttpRequest) ( para criar o objeto 


try { PE RESERO RA XMULHHplegvest 
request = new XMLHttpRequest () ; 


} catch(e) { porque alguns 


request = null; navegadores (AS) 
, e, 
// Agora, experimente a versão ActiveX (TE) suportam-no de modo 
) else if (window.Activexobject) ( Ra diferente, 
try i 
request = new ActiveXObject ("Msxml2. XMLHTTP”); 


// Experimente c objeto ActiveX mais antigo para as versões mais antigas do IE 
} catch(e) ( 
try í 

request = new ActiveXObject (“Microsoft,XMLHTTE”); 
} catch(e) { 


e 
request = null; Ag 
A instrução Aryreateh é um mecanismo de 
+ratamento de'erros Uava Script avançado Nerd 


que permite aum script lidar com elegância 


com os erros da execução, O problemáção 


criar um objeto 


Depois do objeto XMLHttpRequest ser criado, é hora de XMLHttpRequest 
definir a função da sub-rotina da solicitação e, então, abrir a é que os navegadores 
solicitação. têm que fornecer suas 
próprias implementações 
Exata é a função personalizada gue é chamada do objeto. A boa notícia 
grando o servidor responde à solicitação, é que os métodos e 
request .onreadystatechange = handler; as propriedades são 
request.cpenítype, url, true); // sempre assíncrona (true) consistentes em todos 
os navegadores — é a 
E criação do objeto que 
tem que decompor as 
Abrir a solicitação a deixa à promta para ser enviada diferenças do navegador. 


e também determina gual € o Fipo da solicitação 
biT ov POSTO, 
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entendi 


Gets e posts Os dois tipos de 


O tipo de uma solicitação Ajax é muito importante e reflete não oaa Se: 
apenas o que está sendo enviado para o servidor, mas também solicitações usadas 
a intenção da solicitação. Um tipo de solicitação, também o, x Ja 
conhecido como método da solicitação, é GET, que é usado com o Ajax são GE 
basicamente para recuperar os dados no servidor sem afetar nada dl 

nele. O outro tipo de solicitação, POST, geralmente envolve hei POS » AS mesmas 


enviar dados para o servidor, depois do qual o estado do servidor g a 
geralimente muda de algum modo em resposta aos dados que usadas ao enviar os 


E Z 
forno eirfadom formulários HTML. 
GET POST 
ação dos dados que não Usado para enviar dados para o servidor que 


Usado para a recuper: 


mudam nada no servidor. Pequenas quantidades causam, de algum modo, uma mudança em seu 


o ser enviadas para O estado como, por exemplo, salvar os dados em 


de dados ainda poderã RE é i 
sá GET é perfeto tm banco de dados, Os dados ainda podem 
pás AO dados do blog em um arquivo ee retornados em uma resposta. POST é ideal 
f ara uma tarefa como, ici 
ps ae : » Por exemplo, adi 
XML no si dinamicamente uma no: E EE 


va entrada do blog 
blog usando um formulário Web. ea 


Solicitação GET Solicitação POST 


Date: 09/26/2008 $ 
Body: “These dreams just... 
Image: cubeapart.png 


À nova 


pT 


) nome do argvivo 


UAL comendo o 


log inteiro, À solicitação CLT não A solicitação POST emtrada do 
Fem nenhum efeito $ n blog a ser 
muda o servidor Kd 
no servidor porque armazenada 
4 porgue a nova ertrada 3 
e simplesmente uma t no servidor, 


~ he , 
recuperação do blog, do blog € armazenada, 


blog.xmi Resposta POST 


E ee ED 
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Get ou Post? Uma solicitação com XMLHttpRequest 


Depois de decidir sobre um tipo de solicitação e especificá-la ao abrir a 
solicitação, finalmente é hora de enviar a solicitação para o servidor para o 
processamento. O código específico para enviar uma solicitação varia de acordo 


com a solicitação ser GET ou POST. 
À solicitação GÉTe o URL são 


piaig especificados guando a solicitação € é aberta, 


request.open i“GET”, “blog.xml”, true); // sempre assíncrona (true) 


TT DR RA Os dados do blog XML 
À solicitação è 1 são solicitados a partir 
enviada sem dados, do arquivo blog.xmi 
por isso o argumento no servidor através de 
uma solicitação GET. 


para sendt) é null. 


Solicitação GET 


Solicitação POST 


Date: 09/26/2008 
Body: “These dreams just...” 
Image: cubeapart.png 


Uma nova entrada do blog 
é enviada para o servidor 


em uma solicitação POST. 
À solicitação envolve os À solicitação POSTE a URL do 
dados sendo enviados para o servidor, neste caso um script 
servidor, portanto o Fipo do do servidor, são especificados 
dado deve ser definido. A. quando a solicrtação é aberta, 


request .open (“POST”, “addblogentry.php”, true); // sempre assíncrona (true) 


request . setRequestHeader (“Content-Type”, “application/x-www-form-urlencoded; charset=UTF-8”); 


A solicitação é € enviada com os dados transmitidos 
o no argumento para o método sendo), 


Não se estresse com todo esse negócio de GET e POST. 


Relaxe se você não tiver muita experiência com o GET e o POST no 


HTML, não se preocupe. Eles farão mais sentido quando seus 
papéis no YouCube continuarem a ficar mais sólidos. 
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aumento das dificuldades: simplificação do ajax 


Torne o XMLHttpRequest menos difícil O objeto AjaxRequest 


Embora o objeto XMLHttpRequest seja incrivelmente A TR 
poderoso, é preciso muito aprendizado, como sem dúvida alguma personalizado facilita 
vocè já percebeu. Não apenas isso, mas ele requer certa quantidade 

de código “padronizado” que deve estar em cada aplicativo Ajax Q problema de fazer 
que o utiliza. Por isso, muitas bibliotecas de terceiros foram criadas ol Ses ÀS: 
para facilitar o uso do objeto XMLHttpRequest. Muitas dessas as se licitaç ves Ajax. 
bibliotecas estendem os recursos do JavaScript, que é ótimo mas 

requer ainda mais aprendizagem. 


Por isso, uma estratégia útil para o YouCube é criar um objeto 
personalizado mínimo que serve como um assistente conveniente 
para o XMLHttpRequest, permitindo-nos focar puramente em 
fazer as coisas com o Ajax, em oposição a lutar com o objeto 
XMLHttpRequest ou dominar alguma biblioteca de terceiros. 
Esse objeto personalizado, AjaxRequest, adota uma abordagem 
minimalista para tornar o objeto XMLHttpRequest mais útil. 


XMLHttpRequest 


A maioria dos métodos na 
Ajaxkegues+ simplesmente 
acessa as propriedades do 
objeto XML HHlpReguest. 


AjaxRequest 


getReadystate () 


Além do método send ( ), que veremos em um 
momento, é no construtor para o AjaxRequest que o 4 z 
Ajax é muito simplificado em comparação a usar o objeto O metodo sendC) e a força 
XMLHttpRequest sozinho. É tudo o que é necessário para Motriz real do Ajaxeguest, 
criar um objeto AjaxRequest capaz de iniciar as solicitações cuidando dos detalhes de abrir 
Ajax em qualquer navegador moderno: e enviar uma solicitação, 


var ajaxReq = new AjaxRequest(); O construtor para o Ajaxkeguest decompe 
TS tag fes automaticamente todas as complexidades de 
criar o objeto xtaLHhtpkepvest subjacente, 
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<=, Imãs de geladeira JavaScript 


o Aj axRequest personalizado integra o objeto XMLHttpRequest 
jt ; E ii uma interface muito mais simples para enviar as solicitações 
jax e lidar com suas respostas. O problema é, o método send ( ) do objeto 


AjaxRequest não tem algumas incipai: 
> partes principais do código. U: imã 
terminar o código do método. aa o o 


AjaxRequest .prototype.send = function (type, url, handler, postDataType, postData) ( 
if (this.request != null) i 
// Encorre a solicitação anterior 
this. request .abort () ; 


44 adicione um parâmetro fictício para anular o cache do navegador 
url += “?dunmy=” + new Date() «getTime() 


1 


try 


this. request.onreadystatechange =... 


A E E A AET a wii // always asynchronous (true) 


if (type.toLowercase() == “get”) ( 
|! Envie uma solicitação GET; sem dados envolvidos aè 


this. request.send(.. +s+. 


else 4 
2) Envie uma solicitação POST; o último argumento é dados 


this request. setRequestHeador ("Content -TYPO"; + +111 ittrrnr tt" x 


this regquest.send (s.s.s. rettet)7 


y 
+ catchte) ( 
alert (“Ajax error communicating with the server.in” + “Details: 
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solução dos imãs JavaScript 


<->) Solução dos imãs de geladeira JavaScript 


pisa Aj axRequest personalizado integra o objeto XMLHttpRequest 
E à o, fornecendo uma interface muito mais simples para enviar as solicitações 
Ajax e lidar com suas respostas. O problema é, o método send ( ) do objeto 


AjaxRequest não tem algumas partes principai ódi 
; partes principais do ci imã: 
iehalnaE o código'do métcdo: principais ódigo. Use os ímãs para 


4 
O metodo send) envia uma 
solicitação Ajax com detalhes 
explicados em seus pine N 
AjaxRequest .prototype.send = function (type, url, handler, 
Et (this. request t= null) { 


Ji Encerre a solicitação anterior 
this. request .abort (); 


postDataType, postData) | 


Ji adicione um parâmetro ficticio para anular o cache do navegador 


Orl += “?dunmy=” + new Date () .getTime(); = 
ae Å tunção da sub-ratina 

i 7 
try t aier] personalizada sera chami 
this.request .onreadystatechange =. um "i para lidar coma respos: 


| true); // always asmd£enidor d-soficitação, 


this.request .opent. z 


if (type.toLowerCase() == “get”) | 


4) Envie uma solicitação GET; sem dados envolvidos o argumento type para 
E ET v; sendo) determina sea 
solicitação é GT ou PO. 


else ( 
77 Envie uma solicitação POST; o último argumento é dados 


this. request. setRequestHeader ("Content-Type 


} 
} catch(e) ( 
alert (“Ajax error communicating with the server. \n' 
, 
$ 


” + “Details: “ + è); 


Os dados éste te e armazenado no 


são enviados arquivo Uava Script externo ajaxjs 
apenas para jura como construtor e subs 
o servidor métodos PrjaxKeguest+. 

quando a 

solicitação € 

Post 


ajaxjs 
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Como dar sentido a uma solicitação Ajax 


O objeto AjaxRequest personalizado consiste em um 
construtor e vários métodos, com um sendo particularmente 
útil. O método send ( ) é usado para preparar e enviar uma 
solicitação Ajax para um servidor em uma única chamada. Todas 
as solicitações Ajax enviadas usando send ( ) são solicitações 
GET ou POST, que correspondem às solicitações de envio do 
formulário HTML. A diferença é que uma solicitação Ajax não 
requer o carregamento completo de uma página. 


AjaxRequest 


getReadystate( y 
getResponseXML () 


send(type, url, handler, postDataType, postData) 


O tipo da solicitação, GET ou POST. handler 
url A função de callback usada 
O URL do servidor (blogxml no caso para lidar com a resposta. 
do YouCube). Os dados poderão ser Ea 
URL, se necessário. ostDa' v 
a = dados a serem enviados (apenas para os POSTS, 
postDataType não requerido para os GETS). Os dados POST 
O tipo de dados sendo enviado (apenas para podem ser enviados em vários formatos diferentes. 


os POSTS, não requerido para os GETS). 

Todas as solicitações Ajax envolvem estas mesmas partes da informação, embora as 
solicitações GET pulem os dois últimos argumentos, que são opcionais. Portanto, 
os três primeiros argumentos para send ( ) são os mais importantes e são 
suficientes para a as solicitações Ajax mais simples. Como exemplo, a seguinte 
chamada para send ( ) usa os três primeiros argumentos para solicitar os dados 


XML (GET) a partir de um arquivo chamado movies.xml no servidor: 
o 


+ me H 
tste codigo ga Não entre em 
jê criamos um objeto Relaxe pânico com o 
Ajaxkegues+ earmazenamos fraca dad 
solicitaç 
ja citação a variavel aja. a 
O Hipo da solicifagão, ma variavel ajankes Veremos os altos e baixos de 
como as solicitações Ajax são 
ss lidadas no código JavaScript 


ajaxReq. send (“GET”, “movies.xml”, handleRequest) ; personalizado em breve. No 
momento, apenas entenda que 


uma função da sub-rotina de 
q solicitação personalizada deve 
OURL doarguivo A função personalizada que ser definida para uma solicitação 
de dados solicitado. será chamada para lidar coma equea função é chamada quando 
= uma solicitação é completada. 
resposta paraa solicitação, 
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posso fazer uma solicitação? 


É a vez da solicitação no servidor 


Quando o método send ( ) é chamado em um objeto AjaxRequest, 
uma solicitação Ajax é enviada para o servidor e a página Web cuida de 

si, enquanto o servidor processa a solicitação. É onde a parte assíncrona 

do Ajax realmente aparece. Se a solicitação fosse síncrona, a página ficaria 
congelada, incapaz de fazer qualquer coisa até que o servidor retornasse com 
uma resposta. Mas como a solicitação ocorre de modo assíncrono, a página 
não pára e a experiência do usuário não pára de funcionar. 


uanto o servidor 
e essa a solicitação, 
a página tem permissão 
para cuidar de si mesma 
sem parar de funcionar. 


olicuacão AS: 
Só porque a página não fica congelada enquanto Uma solicitação Ajax 
uma solicitação está sendo processada não significa assin crona ocorre sem 


necessariamente que o usuário pode de fato fazer algo 

produtivo. Tudo depende da página específica. No con gelar uma página 

caso do YouCube, exibir com sucesso o blog depende 

inteiramente de obter os dados do blogdevoltano enquanto ela espera que a 
servidor em uma resposta Ajax. Portanto, neste caso, 


a experiência do usuário está ligada à resposta Ajax. solicitação seja processada 
por um servidor. 


Q Pontos de Bala 


a O objeto XMLHttpRequest é o objeto m Às solicitações Ajax têm dois tipos, GET 
padrão para executar as solicitações Ajax, mas ou POST, que são determinados pelos dados 
pode ser um pouco confuso de usar. sendo enviados para o servidor, assim como os 
dados que afetam o servidor. 


= O objeto AjaxRequest personalizado 
serve como um modo conveniente de usar a O método send ( ) do objeto 
o Ajax sem ter que lidar diretamente com o AjaxRequest. 

XMLHttpRequest. 
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Não existem 
Perguntas idiotas 


F: O objeto AjaxRequest é necessário para 
executar as solicitações Ajax? 


R: Não. É perfeitamente correto usar o objeto 
XMLHttpRequest diretamente para enviar solicitações 
Ajax e lidar com suas respostas. Mas por que você 

usaria quando há um modo mais fácil graças ao objeto 
AjaxRequest? O objeto AjaxRequest não faz nada 
perturbador — é apenas um objeto conveniente que ajuda 

a simplificar a tarefa de usar o Ajax cuidando da “atividade” 
envolvida em montar as solicitações Ajax. 


P: Como uma solicitação/resposta Ajax é 
diferente de uma solicitação/resposta HTTP? 


R; As solicitações e as respostas HTTP são usadas pelos 
navegadores Web para recuperar as páginas Web HTML a 
partir dos servidores Web. As solicitações e respostas Ajax 
são muito parecidas com as solicitações e as respostas 
HTTP, exceto por algumas diferenças principais: as versões 
Ajax podem ocorrer a qualquer momento e não envolvem 
necessariamente a entrada de dados HTML. Na verdade, 
uma das grandes vantagens do Ajax é que ele pode ser 
usado para solicitar qualquer tipo de dado. 


É ótimo que o Ajax possa lidar com qualquer tipo de 

dado, mas o tamanho dos dados também não importa em 
nada. O Ajax não está limitado a lidar com uma página 
inteira ou documento de dados por vez. Na verdade, ele é 
realmente equipado para enviar pequenas partes de dados. 
Fazendo isso, o Ajax permite que uma página modifique-se 
dinamicamente solicitando pequenas partes dos dados e, 
então, incorporando-os na página. E tudo isso ocorre sem a 
página nem mesmo ser recarregada. 


+ + 
QUAL O ME 


P Então, o Ajax torna possível montar 
dinamicamente uma página Web em partes? 


JR: Sim! Essa é a principal idéia por trás do Ajax. Porém, é 
mais do que apenas montar uma página a partir de partes. 
Também é sincronizar quando essa montagem ocorre. 
As solicitações e as respostas Ajax ocorrem em tempo real, 
geralmente sem interromper a utilização de uma página. Em 
outras palavras, os usuários não ficam aguardando que uma 
página inteira seja recarregada quando tudo o que precisa 
para ser atualizada é uma pequena seção da página. Essa 
seção da página pode ser carregada em “segundo plano” 
enquanto alguém continua a ler e a interagir com as outras 
partes da página. 


T: Qual a relação de GET e POST com tudo isto? 


R: GET e POST determinam as particularidades de como 
uma solicitação Ajax é lidada pelo servidor. Porém, não 

são diferentes em termos de serem capazes de solicitar 
dinamicamente qualquer tipo de dados a qualquer momento 
— todas as vantagens do Ajax aplicam-se a ambos os tipos 
de solicitação. A principal distinção entre GET e FOST tem 
relação com o servidor passar ou não por uma mudança de 
estado com base nos dados como, por exemplo, armazená- 
los em um banco de dados. Se acontecer, um POST será 
solicitado. Do contrário, será 0 GET 


+ 
ROPÓSITO 


Combine cada parte do código relacionada ao Ajax ao que ela faz. 


XMLHttpRequest 


Recupera os dados sem mudar nada no servidor. 


Envia uma solicitação Ajax ao servidor, resultando em 


uma resposta. 


Envia os dados para o servidor, resultando de algum 


modo em uma mudança no servidor. 


AjaxRequest 
POST 


O objeto JavaScript padrão que torna o Ajax possível. 
O objeto personalizado usado para simplificar as 


solicitações e as respostas Ajax. 


você está aqui» 561 


solução de qual é minha finalidade 


+ 


+ 
QUAL O MEU PROPÓSITO 


+ 


Combine cada parte do código relacionada ao Ajax ao que ela faz. 


XMLHttpRequest 
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Recupera os dados sem mudar nada no servidor. 


Envia uma solicitação Ajax ao servidor, resultando 
em uma resposta. 


Envia os dados para o servidor, resultando de algum 
modo em uma mudança no servidor. 


O objeto JavaScript padrão que torna o Ajax possível. 


O objeto personalizado usado para simplificar as 
solicitações e as respostas Ajax. 


XMLHttpRequest 


O objeto AjaxRequest 
personalizado serve como 
um “envoltório” para o 
XMLHttpRequest padrão, 
tornando-o mais fácil de 
trabalhar com o Ajax. 


O método send( ) envia 
uma solicitação Ajax 
que é GET ou POST, 


Date: 09/26/2008 
Body: “These dreams just... 
Image: cubeapart.png 


dados dinâmicos 


As páginas interativas iniciam com um objeto de 
TRA ra 
solicitação 
Independentemente de como o Ajax está sendo usado ou qual tipo de dados 
ele está tentando acessar, qualquer comunicação Ajax de dados inicia com uma 
solicitação. Portanto, a primeira tarefa de Ruby ao transformar o YouCube em um 


aplicativo baseado em dados é enviar uma solicitação Ajax para o arquivo XML que 
contém os dados do blog. 


Parece que preciso criar um 
objeto AjaxRequest e, então, 

usá-lo para enviar uma solicitação 
para os dados do blog. 


0 Crie um objeto AjaxRequest. 


O Envie uma solicitação GET para recuperar o 
arquivo blog.xml no servidor. 


O Lide coma solicitação...? 


~ 4 
Ruby ainda não esta certa sobre a 
etapa 3, mas ela pode se concembrar 
nas dvas primeiras etapas agora, 


engporto seu Lápis 


Escreve o código para criar um objeto AjaxRequest e, 
então, use-o para enviar uma solicitação para os dados do blog 
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solução inteligente 


enfiponto seu Lápis 
Ra Solução Escreve o código para criar um objeto AjaxRequest e, 


então, use-o para enviar uma solicitação para os dados do 
blog XML. 


0 ajaxReq = new AjaxRequest( ); 


A solicitação Ajax é uma Nenhum deles significa 


7 
solicitação LÉT, uma vez O arquivo XML é especificado muito ate lidarmos Sil 
ge +udo que estamos como a URL da solicitação a resposta na função 
fazendo é recuperar os handleRegues K 3) 
dados no servidor, personalizada, 


Chame quando tiver terminado 


Assim que uma solicitação Ajax é enviada, o papel do navegador .. 

muda — ele não está aguardando uma resposta do servidor Mas lida com a resposta 
como as solicitações Ajax são geralmente executadas de modo ro | 
assíncrono, o usuário pode continuar a interagir com a página para uma solicitação 


O seript do cliente 


enquanto o navegador aguarda a resposta internamente. Em 


o 
outras palavras, a solicitação Ajax não pára a página enquanto Ajax usando uma 


a solicitação está sendo processada no servidor. Assim que a = 
solicitação termina de ser processada no servidor, sua resposta função de callback 
personalizada. 


é lidada no código JavaScript usando uma função de callback, a 
A resposta é enviada do servidor 


sub-rotina da solicitação. 

para o navegador, que então 
corta cam uma função de callback 
personalizada para lidar com a 


solicitação. 


Navegador Web, 
À Função 


O escemobjcto-ajzsrequese— de callback 


handieRegves K 


OrmicemescicaçoCETpr  Séinteiramente 


recuperar o arquivo blog«ml-no servidor. personalizada e 


BT: e deve ser fornecida handleRequest ( ) ; 
E! Lide com a solicitação. ar 
pelo script, da», | 
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dados dinâmicos 


Como lidar com uma resposta... uniformemente 


A função de callback da sub-rotina de solicitação personalizada, handleRequest tds 
neste caso, é chamada assim que uma solicitação Ajax termina. Além de sinalizar que uma 
solicitação terminou com sucesso, o serviço desta função é tomar uma ação com base nos 
dados de resposta retornados pelo servidor. 


Entendo que a sub-rotina de solicitação é 
chamada para cuidar da resposta Ajax, mas 
como ela acessa os dados da resposta? 


Os métodos do objeto AjaxRequest têm 
acesso aos dados de resposta Ajax. 


A função de sub-rotina da solicitação fornece acesso aos 
dados retornados em uma resposta Ajax através de dois 
métodos do objeto AjaxRequest, getResponseText ( ) e 
getResponseXML( ). 


AjaxRequest 


ee OE 
getReadyState (0) 


getstatus () 


getResponseText ( ) 
Obtém os dados em uma 
resposta Ajax como texto bruto. 


getResponseXML t) 
Obtém os dados em uma resposta 
Ajax como código XML estruturado. 


Apenas um desses métodos tem acesso aos dados viáveis para qualquer determinada resposta, 
significando que o formato dos dados determina qual método deve ser usado. Portanto, 
getResponseXML( ) deverá ser usado se os dados da resposta forem XML, neste caso 
getResponseText ( ) não retornará dados significativos. O mesmo ocorrerá no inverso 
se os dados forem texto bruto, em oposição ao código XML estruturado. 


Poder do 
cérebro 


Sabendo que o código XML é estruturado de modo muito parecido com o código 
HTML, você poderia acessar os dados do blog XML na sub-rotina de solicitação? 
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DOM salva o dia 


Se o XML for apenas um monte 
de tags, então o DOM poderá 
ser usado para processar os 

dados da resposta XML? 


DOM para seu resgate 


As habilidades de quebra-cabeças de Ruby são certamente 
recompensadas porque ela está certa sobre a idéia de usar o DOM 
para processar os dados da resposta XML. O DOM é para manipular 
os dados HTML como uma árvore de nós. Mas não há nada 
específico do HTML sobre o DOM, que significa que também pode 
ser usado para trabalhar com o XML como uma árvore de nós. Ruby 


apenas tem que considerar os dados do blog XML de seu YouCube 
em termos de nós. 


<blog> ; 
etitle>Youcube - The Blog for Cube Puzzlers</title> 
<author>Puzzler Ruby</author> 
<entries> i 
<entry> 
<date>08/14/2008</date> 
<body>Got the new cube 1 ordered 
<tentry> 


It's a real pearl.</body> 


<entry> 5 
<date>09/26/2008</date> a à ee 
<«body>These dreams just keep getting weirder ra seeing 
a cube take itself apart. What <strong>does</strong 
mean?</body> 
<image>cubeapart .png</image> 
</entey> 
</blog> 


author 


“Puzzler Ruby” 


A Las <author> comem 
o nome do autor como um 
elemembo-tiho de texto, A bas <body> será capas 

de conter Varios filhas se 


E “does” 
o conteúdo do blag combiver fr À 


tags de Formatação HruL. 


Ruby precisa ser capaz de extrair o conteúdo dos nós dos dados XML, que é uma tarefa DOM 


repetitiva mais adequada para uma função. Não fará nenhum sentido adicionar muito código 
duplicado ao YouCube se puder ser evitado. 
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dados dinâmicos 


Um foco na função getText( ) 


A função get Text ( ) personalizada lida com o trabalho chato de 
repetir um elemento (nó) na árvore DOM e extrair todo seu conteúdo. 


function getText (elem) ( 
as ON O argumento do elemento contém o 
war text = g 
elemento cuja combeúdo sera extraido. 


if (elem) ( 
if (elem.childNodes) { Faça um loop em todos os 
for (var i = 0; i < elem.childNodes.length; i++) { nos-filhos da elemento. 

var child = elem.childNodes[i]; 

if (child.nodevalue) 
text += child.nodeValue; 

else ( Ne Sica Adicione o combeúdo do filho à variavel text, 
if (child.childNodes) 

if (child.childNodes [0] .nodevalue) 


text += child.childNodes [0] .nodeValue; 


Neue Se houver nas-filhos em um nó-filho, 
simplesmeme obtenha o combeido do texta do 
primeiro e prossiga, 


+ Lo Retorne a variavel text, gre combém 
return text; 
o comeúdo-filho de Fis iesta 


} 


aiport seu Lápis 
Sabendo que os dados de resposta XML já foram armazenados 


em uma variável chamada xml Data, escreva o código para 
definir a assinatura do blog YouCube para o nome armazenado 
na tag XML <author>. 
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respostas Ajax expostas 


us 
Aponte seu Lápis 
= Sabendo que os dados de resposta XML já foram armazenados 


ia a Sã código para 
definir a apsiyasara dd blog YouCybë pará o nidincammacenado 
na tag XML <author>. 


A 


Deve haver apenas uma 


Hag <avthor> nos 
dados XML., portanta 
simplesmente obtenha a para extrair o combeúdo do prototype do Blog. 


primeira, 


Use a função auxiliar 
getTedod personalizada 


) 


A assinatura é uma propriedade 
da classe, portanta deve ser 
definida através do objeto 


+exto da Hag <avthor>, 


Como lidar com as respostas Ajax 


Entrevista desta semana: 
A sub-rotina de solicitação Ajax handleRequest{ ) confessa 


Use a Cabeça: Ouvimos dizer que você é muito 
boa ao responder às solicitações Ajax. Em que 
isto implica? 


handleRequest( ): Quando uma solicitação 

Ajax chega, começo a lidar com a resposta, 

que geralmente contém dados enviados do 
servidor. Meu trabalho é primeiro assegurar que a 
solicitação tenha sido bem executada no servidor 
e se foi, então, abro caminho nos dados e cuido 
de sua integração na página Web, se necessário. 


Use a Cabeça: Então, você é realmente 
chamada quando uma solicitação termina? 


handleRequest( ): Ah, sim. Na verdade, 

sou chamada várias vezes no processo de 
solicitação, mas na maioria das vezes as pessoas 
estão interessadas apenas quando faço algo bem 
no final. 


Use a Cabeça: Entendo. E como você sabe 
quando é o final? 


handieRequest( ): Bem, o objeto AjaxRequest 
tem alguns métodos que posso chamar para 
verificar o estado e o status da solicitação para 
assegurar que tenha terminado sem nenhum 
problema. 


Use a Cabeça: Assim que isso acontece, como 
você sabe o que fazer? 


handleRequest( ): Bem, realmente não é comigo. 
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Lembre-se, sou uma função personalizada, 
portanto sou diferente em cada aplicativo. 


Use a Cabeça: Por que é assim? 


handieRequest( ): Porque aplicativos diferentes 
usam os dados da resposta de modos diferentes 
— é inteiramente específico do aplicativo. E eu 
também. 


Use a Cabeça: Espere um minuto, você quer 
dizer que alguém reescreve você novamente 
para cada aplicativo? 


handleRequest( ): Correto. Apenas faz sentido 
porque um aplicativo do carrinho de compras 
processaria suas respostas Ajax de modo muito 
diferente de um blog, por exemplo. O Ajax 
assegura que eu seja chamada assim que o 
servidor termina com a solicitação e a partir desse 
momento, tudo é completamente personalizado. 


Use a Cabeça: Então, parte da construção de 
uma página Web acionada pelo Ajax é criar uma 
sub-rotina de solicitação personalizada? 


handieRequest( ): Absolutamente. É onde 
grande parte do trabalho real ocorre em um 
aplicativo Ajax. 

Use a Cabeça: Isso é muito esclarecedor. 
Agradeço. 


handleRequest( ): Sempre fico feliz em 
responder. 


dados dinâmicos 


SEJA o anotador JavaScript 


Sua função é fingir ser o anotador JavaScript e adicionar 
muitas anotações para explicar exatamente o que está 
ocorrendo na função handleReguest( ). 7 é um número 
mágico - existem 7 coisas que levam a uma 
solicitação bem-sucedida? 


function handleRequest () ( 
if (ajaxReq.getReadyState() == 4 6 ajaxReq.getStatus () 
// Armazene os dados da resposta XML 
var xmiData = ajaxReg.getResponseXML () .getElementsByTagName (“blog”) [0]; 


200) | 


/i Defina a assinatura de todo o blog 
Blog.prototype.signature = “by “ + getText (x«mlData.getElementsByTagName (“author”) [0]); 


4! Crie o array de objetos de entrada Blog 
var entries = xmiData.getElementsByTagName (“entry”); 
for (var i = 0; i < entries.length; i++) ( 
// Crie a entrada do blog 
blog.push (new Blog (getText (entries [i] .getElementsByTagName (“body”) [0]), 
new Date (getText (entries [i] .getElementsByTagName (“date”) [0]))+ 
getText (entries[i] .getElementsByTagName (“image”) [0]))) 7 


, 


Ži Exiba o blog 
showBlog (5); 
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seja a solução 


SEJA o anotador J: avaSeript Solução 


Sua função é fingir ser o anotador JavaScript e adicionar 
muitas anotações para explicar exatamente o que está 
ocorrendo na função handleReguest(). 7 é um 
número mágico - existem 7 coisas que levam a uma 
solicitação bem-sucedida? 


Ha apenas uma Fag <blog> 
nos dados XML, portanto 
obtenha o primeiro item 

no array retornado por 


Centitigue-se de ue a solicitação 
Ajax seja complefada com 
Defina a assinatura do Sucesso verificando seu estado e 


A 
blog para o combeúdoma sev status. PM AS 
Fag <aubhor>, ka srzi s AS . 
function handieRequest () ( 

if (ajaxReg.getReadyState() == 4 &4 ajaxReg.getStatus() == 200) į 


// Armazene os dados da resposta XML 
var xmlData = ajaxReg.getResponseXML () .getElementsByTagName (“blog”) [0]; 


// Defina a assinatura de todo o blog 
Blog.prototype.signature = “by “ + getText (xmlData.getElementsByTagName (“author”) [0]); 


4! Crie o array de objetos de entrada Blog 
var entries = xmlData.getElementsByTagName (“entry”); 
for (var i = 0; i < entries.length; i++) { 
// Crie a entrada do blog 
blog.push (new Blog (getText (entries [i] .getElementsByTagName (“body”) [0]), 
new Date (getText (entries [i] .getElementsByTagName (“date”) [0])), 


getText (entries[i].getElementsByTagName (“image”) [0])) 
, 
Vias à blog Crie um novo objeto do blog para a Obtenha Lados és 


showBlog (5); embrada e adicione-o ao final do arra elementos da entrada 
i } usando o metodo push) do objeto rra, gre mantêm as entradas 
Z do blog, Não é necessário 
Chame a função show Blogc> obter o elemento entries 
para exibir as cinco Últimas quando podemos ir 
embrada do blog na página, o 5 ; k diretamente para cada 
—Erie-um-objeto-AjaxRequest — entrei: 


(2) n E sia 
Feito! 


O a LO) 
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dados dinâmicos 


O YouCube é conduzido por seus dados As vitimas versões 
i dos arquivos Yovlvbe 


estão disponiveis em 


Ruby está vibrando com a renovação Ajax do YouCubé (ela está 
economizando uma grande quantidade de tempo), mas ela tem 
uma incômoda preocupação relacionada ao que acontece na página www albtabsoks.combr. 
enquanto os dados do blog estão sendo carregados. 


O blog realmente funciona muito bem com os 
dados separados no código XML, mas há uma 
maneira de deixar que o usuário saiba que o 
blog está ocupado sendo carregado? Algo que os 
permita saber que a página está trabalhando. 


ma tá v bap reling ay ae co, 


saaa 
Vo ms sig o ce vm 
Var a 


Won, i rook e roed! 


Agora, o blog é conduzido sie tir 
pelos dados XML. PE o ce Coy ita see 
Errado a 


Mas alguns usuários 

S Fio confusos com a 
página em branco que 
aparece enquanto os 
dados estao carregando, 


epore seu Lápis 


function loadBlog( ) 


Escreva a linha de código que falta na função loadBlog ( 
) que exibe uma imagem de “espera” denominada wait.gif 
enquanto os dados do blog estão sendo carregados. 


Sugestão: Use o div principal do blog, com um ID “blog”, 


ajaxReg.send (“GET”, “blog.xml”, handleRequest); 
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solução inteligente 


function loadBlog( ) { 


ajaxReg, send (“GET”, 


“blog.xml”, handleRequest); 
A imagem de espera substrtur 
y completamente o combeudo do 


A imagem marte gif animada 
é usada no lugar das 
entradas do blog para 
deixar que o usuario saiba 
que os dados do blog estão 
sendo carregados. 


blog empuamto os dados do blog 

estão sendo carregados, 
BOB coesa 
YouCube - The Blog for Ci 


Aponte seu Lápis 
A Solução Escreva a linha de código que falta na função loadBlog ( 


) que exibe uma imagem de “espera” denominada wait.gif 
enquanto os dados do blog estão sendo carregados. 


Sugestão: Use o div principal do blog, com um ID “blog”. 


tg. 5) 


innertTRAL é mais facil de vsar ) 
do que o DOM neste caso, uma vez 
que estamos adicionando uma fas 
da imagem com alguns atributos. 


Youcut 


sw 


Não existem 
Perguntas idiotas 


P: A última entrada do blogYouCube tinha 
uma tag <strong> HTML. Como isso é 
possível no código XML? 


R: Lembre-se de que o código XML pode ser usado para 
representar qualquer tipo de dados. Neste caso, sabendo que 
o corpo de uma entrada do blog está sendo injetado em uma 
página Web, é tecnicamente possível incluir tags HTML que 
afetem como o corpo aparece na página. Em outras palavras, 
o conteúdo do corpo de uma determinada entrada do blog 
pode conter tags HTML que são transmitidas como nós de 
formatação especial no código XML. Porém, é uma perspectiva 
bem capciosa, uma vez que teriamos que reconstruir os nós 
de formatação HTML no código HTML para a página ao injetar 
os dados XML na página. Ao invés de percorrer esse caminho, 
o código YouCube escolhe apenas retirar o conteúdo do texto 
de qualquer tag HTML, deixando a formatação para trás. Ruby 
ainda está livre para adicionar tags de formatação HTML ao 
conteúdo do blog, possivelmente para uma futura versão do 
YouCube, mas elas são ignoradas para a formatação. Seu 
texto permanece, que é uma boa coisa. 
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P: Como funciona o estado e o status de 
pronto de uma resposta Ajax? 


R: Estas duas propriedades, basicamente, vêm do 
objeto XMLHttpRequest e seu trabalho é controlar o 
estado da solicitação como, por exemplo, (0) inicializado 
ou (4) carregado, assim como o status da solicitação 
como, 404 (não encontrado) ou 200 (OK). Certamente é 
possível controlar de perto essas propriedades, mas não 

é necessário. Tudo que você precisa saber é que uma 
solicitação Ajax completou com sucesso, caso o estado seja 
4 (carregado) e o status seja 200 (OK). É por isso que a 
função handleRequest ( ) entrará apenas em ação 
se ambas as condições forem satisfeitas. 


dados dinâmicos 


Botões disfuncionais 


Embora a revisão Ajax do YouCube tenha ocorrido basicamente de modo interno, 
fora da visão dos usuários YouCube, aparentemente há um problema da interface 
do usuário que aparece. Mais especificamente, parece que os botões na página são 
estão funcionando bem como deveriam. 


A Search the Blog 


Os usuários estão informando que algumas 
vezes os botões não funcionam. Eles clicam 
e nada acontece. Não só isso, mas o blog 

não fica visível quando os botões estão 
agindo. O que está acontecendo? 


Show All Blog Entries | 
ar a 


\ 


W 
Ne View a Random Blog Entry 


A 


Por alguma razão, os botões 
não estão funcionando Lodo 
o tempo e à blog não fica 

visivel guando isso acontece, 


Botões danificados = usuários infelizes 


Poder do 
“(A cérebro 


Ruby está calma, mas ela 
Por que os botões do blog não estão funcionando? Quando 


você acha que está ocorrendo o problema no processo de 


realmente precisa chegar 
carregamento da página? 


à raiz deste problema. 
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quando posso usá-los? 


Os botões precisam de dados 


O problema com os botões YouCube é que eles são aplicáveis apenas quando os 
dados do blog estão disponíveis. E como os dados do blog agora são carregados a 
partir de um arquivo XML externo, haverá um período de tempo, geralmente muito 
breve, no qual as páginas não têm dados. Durante esse período, os botões não terão 
sentido e apenas estarão confundindo os usuários. 


Os botões podem 
simplesmente ser desativados 
até que os dados do blog 
fiquem disponíveis? 


Desativar os botões é uma excelente 
solução. 


Desativar os botões enquanto os dados do blog são carregados 
é um modo simples e elegante de resolver o problema do 
botão. Como a solicitação Ajax para carregar os dados do 

blog é enviada quando a página é carregada pela primeira 

vez, os botões podem iniciar desativados e ser ativados na 
função handleRequest ( ), que é quando sabemos que a 
solicitação Ajax terminou. 

Para realmente executar a desativação, precisamos usar o 
atributo disabled da tag <input>. Essa tag deve ser 
definida para “disabled” no código HTML para desativar 
um botão. Em oposição, cla deve ser definida para fal se no 
código JavaScript para ativar um elemento do botão. 


<input type="button” value="Search the Blog” 


Search the Blog | 
Search the Blog 
buttonBlem disabled = false; 


574 Capítulo 12 


dados dinâmicos 


e: Ímãs de geladeira JavaScript 


Use os ímã: i ódi; 
is para terminar o código na página YouCube para que os botões do 


blog sejam desativados até 
seja os até que os dados do blog termine s 
precisará usar alguns desses ímãs mais de uma a o ie 


<html> 
<head> 
ritle>Youcube — The Blog fer cube Puzzlers</title> 


escript type-"text/javascript” srco"ajax.ja"> </script> 
dC CApE type="text javascript” ser date.)s”> </script> 


<script eypes"text/javascript"> 
Fanction handleRequest ( Í 
if (ajaxReq.getReadystate() == 4 se ajaxneg.gerstatus() == 200) 4 


7) ative os botões do blog 


document . getElementById(---- 


document .getELementById(e ++ +=»=+ 


document .getElementBy Id. 


1 


«jscript> 
<inead> 


<body onloade” LoadBlog() “> 
ns>vouCube - The Blog for cube Puzzlers</h3> 
<img src="cube.png” alt="youcube” /> 
<input type="button* id=rgearch” value="Search the Blog” 


+...» onelic! ="searchalog0:” /> 


Soarehtext” names" searchuext” value="" / 


<input type="text” i 
<div id="blog"></div> 
<input type="button” id="showall” valu 


"show All Blog Entries” 


PONER i r i = onclick=”showBlog():” /> 
<input type="button” ja-rylewrandon” values"View à Random Blog Entr) 


rs saire onclick=”randomBlogt;” “> 
</body> 
</html> 


a 
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solução dos imãs JavaScript 


e) Solução dos Ímãs de geladeira JavaScript 


Use os ímãs i 
para terminar o código ápi 
blog sejam de: z na página YouCube para que os botô 
sativ que os botões d: 
ia ivados até que os dados do blog terminem de ser car Ee 
usar alguns desses ímãs mais de uma vez goi i 


<html> 
<head> 
stle>roucube - The Blog for Cube puzslers</title> 


<script type="text /javascrip srce"ajax.js”> </script> 
cecrapt typa="text/javascript” srcardate.js"> </script> 


script type=“text/javascript”> 


function handleRequest () t 
dE (ajasneg.getReadystate() == 4 6 ajaxReq.geustatus() 


7] ative os botões do blog 


l 


| 


) 
</script> 
</head> 


<body onload="1cadBlog () "> 
Cn foucube - The Blog for Cube Puzziers</h?> 
Siar src="cube png” alt=" YouCube” j> 
<input type="button” ide Surch” value="Search the Blog” 


<input type="text" ARRENE” name="searchrext” value="" /> 
<div id="blog"></div> 
<input type="button ide*shovall* value="shou All Blog Entries” 


View a Pandom Blog Entry” 


“yandomBlogi):” /> 


</body> 
</html> 
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Como economizar tempo com os acréscimos do blog 
baseados na Web 


Agora, o YouCube é conduzido por dados dinâmicos, mas Ruby ainda tem que 
aproveitar totalmente a recompensa. À verdadeira vantagem dos dados dinâmicos no 
YouCube não será completamente compreendida até que ela tenha a capacidade de 
usar uma interface baseada na Web para adicionar as entradas do blog. Ao invés de 
editar um arquivo XML para adicionar ao blog, ela deseja ser capaz de simplesmente 
fornecer uma nova entrada em uma página Web e salvá-la no servidor. 


Fico cansada de editar os arquivos e, então, 
enviá-los com FTP para o servidor só para 

atualizar meu blog. Gostaria de atualizar o 

YouCube a partir de meu próprio navegador! 


Editar código + Fazer upload des arquivos = Nenhuma diversão! 


Ruby imagina uma página Web só para ela, que lhe permita 
enviar uma nova entrada do blog simplesmente preenchendo um 
formulário. Ela poderia sempre estar a um clique de atualizar seu 
blog e tudo que precisaria é de um navegador. Nenhum editor de 
texto, nenhum cliente FTP, apenas seu entusiasmo pelo quebra- 
cabeça de cubo. 


MOBO Youtube -Addingtothe Blog for Cube Püzzlers. © 
YouCube - Adding to the Blog for Cube Puzzlers 


< A 
71 “ Date: [1070472008 
/ LBody: fm really looking forward to this puzzle party at the end of the month. P 
Image (optional): Hdicianar uma nova ertrada do blog é Fio facil 
j— gvamto preencher os campos e clicar um sotão! 


A nova pagina do blog para 
adicionar Usa os campos cérebro 
do formulario para as 
+rês partes dos dados de 
entrada do blog, 


Como o Ajax poderia ser usado para adicionar as entradas do blog 
XML através de uma interface do usuário da página Web? 


você está aqui» 577 


clientes e servidores... de novo 


Como escrever os dados do blog 


Ao considerar o acréscimo do blog em termos de Ajax, é possível imaginar uma 
solicitação POST Ajax que envia os novos dados de entrada do blog para o 
servidor, depois disso, o servidor grava os dados no arquivo blog . xml como 
uma nova entrada do blog, A resposta Ajax realmente não precisa fazer nada neste 
caso, uma vez que não há nada para retornar. 


Espere! Como exatamente a nova entrada 
do blog é gravada no arquivo blog.xml no 
servidor? Achei que o JavaScript não 
podia gravar arquivos. E o JavaScript não 
é uma tecnologia do cliente? 


O JavaScript não é a resposta para gravar em um 


arquivo no servidor. 


O JavaScript não é uma opção para gravar no arquivo blog;xml no 
servidor. Na verdade, você não pode nem executar o código JavaScript no 
servidor. É porque o JavaScript é uma tecnologia do cliente designada a 
ser executada unicamente nos navegadores Web. Neste caso, em particular, 
o JavaScript não ajuda porque precisamos gravar um arquivo no servidor. 
É um problema comum, sendo por isso que as tecnologias no lado do 


servidor são geralmente usadas junto com o JavaScript. 


O que precisamos é de uma tecnologia parecida com o JavaScript, 


mas unicamente para fazer as coisas no servidor. 


Existem várias 


opções, mas uma é lembrada, pois não é complicada demais e funciona 


surpreendentemente bem com os dados XML... 
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dados dinâmicos 


PHP para o resgate... desta vez O PHP é uma 


Uma linguagem de script chamada PHP oferece tudo que precisamos 
para gravar os dados do blog em um arquivo XML no servidor. À tecnologia de 
tarefa real envolvida é ler o arquivo XML, então adicionar a nova o 
entrada do blog às entradas existentes e depois gravar todas as ser ipt que pode 
entradas do blog de volta no arquivo original. Mas tudo tem sua 

Era executar tarefas 


origem no recebimento dos novos dados de entrada do blog no 
servidor como uma solicitação Ajax a partir do navegador do cliente. no servidor. 


Date: 10/04/2008 
Body: “I'm really looking...” 
Image: 


A nova emtrada do blog € cova ) 


para o servidor como os dados 
em uma solicitação POST Ajax. 


o PHP desempenha um papel 
parecido com o UavaSeript, 
mas no servidor, ao inves do, 


cliente. / 


Date: 10/04/2008 A 
Body: “I'm really looking... 


Image: 


O scxzpr PHP vo servor 
OBTEN A ENTRADA DO BLOG £ 
LRAVA-A NO AKRUTVO BLOG. 
xut. 


: “I'm really looking... 


Você pode considerar o PHP como 

um tipo de equivalente do servidor 

do JavaScript, no sentido de que é 
executado no servidor e é capaz de 
executar tarefas personalizadas... como, 
por exemplo, gravar uma entrada do 
blog em um arquivo como dados XML! 


você está aquip 579 


excelência no lado do servidor 


PHP 


Saindo do Forno 


Verifigue para saber se o 


argpiva do blog existe. 


<?php 


No lado do servidor do YouCube, um script PHP lida 


arquivo blog xml. 


com os detalhes de adicionar uma nova entrada do 
blog aos dados do blog XML que são armazenados no 


Carregue os dados XIL brutos na variavel 


rawblog. 


sfilename = “blog.xml”; 


if (file_exists (Sfilename)) | r e 
/i Carregue as entradas do blog a partir do arquivo XML 


SrawBlog = file get contents (Sfilename) ; 


3 
else į 


e io 
// Crie um documento XML vaz 
"= version=\”1.0\" encoding=\ 
Ent ube - The Blog for Cube Puzzlers</ 


$rawBlog = 

$rawBlog 
title>"; 

Srawblog -= 
y 


/i Adicione a nova entrada do blog como * 
e Suml->entries->addChi ld (“entry”) : 


„= “cblog><title>Youc! 


= “cauthor>puzzler Ruby</autho: 


Swml = new SimpleXmlElement (SrawBlog) ; 


ddChi ld (“date”, S REQUEST I“date"]); | 
a “body”, stripslashes (3 REQUESTI 


pr 


», 5 REQUESTI “image” ]); 


at); 


Não existem 


Conver: Sentry 

aaa Gantxy=>addcnild( 

do blag do uma $E nat imo 
estrutyra a E 
dadas MAL |) e a o PIE 
que e muro fwrite (Stile, Sxml->askML()) 
parecida 

uma arvar 

DOM no 

VavaScript. 


P: Tenho que usar o PHP 
para gravar os arquivos no 
servidor? 


R: Não, absolutamente. Existem 
todos os tipos de tecnologia para 
gravar os scripts do servidor. Você tem 
os servlets Peri (CGI) e Java para citar 
alguns e eles podem fazer as mesmas 
coisas que o PHP. Portanto, caso se 
sinta mais confortável com uma dessas 
outras tecnologias, use-a para criar o 
componente do lado do servidor de 
seus aplicativos Ajax. 
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um nó-filho 


Se o arquivo da 
blog não existir, 


ente um documento 
LT da bos L yagi 


matga" 2>”; 


r>tentries></entries></bloa>"; 


Alticione a nova entrada do 

y; 
blog como um no-filho dertro 
da estrutura de dados XUL. 


“body”])); 


Sosrescreva o arguivo do blog 


fclose ($file); Fot OR as navos dados do blog, 
?> 


ste seript PHP armazenado 
no arquivo addblogertry php. 


P: Posso ter sucesso usando script do servidor. A maioria dos 


o Ajax sem ter que usar um 
programa no servidor? 


R: Em alguns casos sim, mas na 
maioria não. Lembre-se de que tudo, 
exceto as solicitações Ajax mais 
simples, envolve o servidor recebendo 
dados do cliente e, então, fazendo 
algo com eles como, por exemplo, 
pesquisar algo em um banco de 
dados ou gravar algo em um arquivo 
ou banco de dados. A página do blog 
YouCube principal é um bom exemplo 
de uma solicitação Ajax que é simples 


o bastante para não requerer nenhum 


aplicativos Ajax não tem tanta sorte, 
portanto na maioria dos casos, você 
precisará fazer alguma codificação 

no servidor. O problema real é se o 
servidor pode ou não apenas retomar 
um arquivo inteiro, como é o caso com 
o blog.xml, ou se ele tem que processar 
de alguma maneira os dados e fazer 
algo com eles no servidor como, por 
exemplo, gravá-los. A boa noticia é 
que os tipos de scripts requeridos 

no servidor para muitos aplicativos 
Ajax são bem simples e podem 

ser calculados sem um domínio da 
tecnologia de script do servidor. 


dados dinâmicos 


O PHP tem necessidades também Executar um 
Diferente do JavaScript, que é suportado inerentemente nos 
navegadores modernos, o suporte PHP não é sempre uma conclusão seript PHP pode 


prévia no servidor. Portanto, antes de enviar arquivos PHP para 
seu servidor Web, provavelmente vale a pena verificar com seu requerer alguns 
ajustes em seu 


administrador do sistema ou serviço de host Web para saber se 
o PHP é suportado. Se não for, você precisará fazer tudo que 
uder para adicioná-lo ou possivelmente encontrar um servidor x g 
We ee O script PHP para o YouCube simplesmente não servidor W eb. 
funcionará, a menos que o PHP seja suportado no servidor. 
Mesmo que não, você 
podera ser capas de 
PHP instala-lo sozinho 
ou persuadir um 
administrador a inst 
lo, Definitivamente, você 


Certifique-se de que servidor < precisará dele para o 
Web suporte o PHP. Aja xl g 


O suporte para o PHP em seu servidor Web é o primeiro obstáculo. O 
segundo é descobrir onde colocar os arquivos PHP no servidor. Em muitos 
casos, é bom colocar os arquivos PHP na mesma pasta de suas páginas Web 
HTML e arquivos JavaScript externos. Contudo, algumas instalações PHP 
são mais exigentes e requerem que os scripts PHP sejam armazenados em 
uma pasta especial. Novamente, é uma pergunta que pode ser respondida 
por um administrador do sistema. 


Em muitos casos, você pode 
armazenar os scripts 
PHP na mesma pasta onde  addblogentry.php 
suas páginas Wes estão 

armazenadas, 


youcube.html blog xml nado o Sosane 
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a parte php da equação 


Como fornecer dados ao script PHP Os dados são 


Com o PHP funcionando no servidor e o arquivo do script f id š 
PHP no lugar, podemos examinar mais de perto do que o ojnecidos do script 


script PHP precisa para gravar os dados em um arquivo XML A 

no servidor. Isso ajudará a chegar a uma construção para a PHP através de uma 
solicitação Ajax que forneça ao servidor exatamente o que ele oliestação Aĵ 

precisa para executar a tarefa. se licitação ax- 

O script PHP está esperando dados para uma nova entrada do 

blog, que sabemos que consiste em pelo menos duas partes de 

informação e potencialmente três. 


Date 


A data da entrada do blog 
Date: 10/04/2008 e 
Body: “I'm really looking... 
Body am] ar: 
O texto do corpo da entrada do blog 
/ 
Image O codigo avaSeript do cliente deve colocar 
Uma imagem opcional para a entrada | 05 dados em um formato gue possa ser 
do blog. J enviado para o servidor como parte de uma 


solicitação Ajax, 


i P E O trabalho do servidor é 
Estas informações devem ser reunidas de algum modo vtt dale ação Ajax 
e enviadas para o servidor como uma solicitação Ajax, 

ã É e fornecer seus dados 
onde serão processadas e gravadas no arquivo blog-xml. 
so script PHP para o 


processamento. O serip + 


Neste ponto 3, à nova 
entrada do blog for 
adicionada as arquiva 
blag.xml e aparecera 
no blog Goulube 


<entry> 
<date>10/04/2008</date> 


automaticamente 

h ~ 
ma proxima vez em gravação 
BUE a pagina do blog noarguivo 
for carregada ou blogaml 
iik r O desafio é, então, sugerir uma construção para a página Web de acréscimo 


do blog que apresente primeiro uma interface do usuário para fornecer 
uma nova entrada do blog e, então, reúna essas informações e envia-as para 
o servidor em uma solicitação Ajax. A boa notícia é que não precisaremos 
realmente fazer nada em resposta à solicitação, a não ser talvez confirmar 
que a nova entrada do blog foi gravada com sucesso. 
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Projete a construção da página Web de acréscimo da entrada 
do blog YouCube, mostrando exatamente como a solicitação 
Ajax e a resposta decompõem-se no fluxo de dados. 


aiport seu Lápis 
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solução inteligente 


PA 

aan seu Lápis 
Solução Projete a construção da página Web de acréscimo da entrada 

do blog YouCube, mostrando exatamente como a solicitação 

Ajax e a resposta decompõem-se no fluxo de dados. 


A solicitação Ajax é uma solicitação Posr 
pve consiste nas seguimbes artes de dados: 


A pagina Web de acréscimo do 

blog Hem campos do formulário 
para fornecer novos dados de 
emtrada do blog, 


* Data do blog 


eoo YouCube - Adding to the Blog for Cube Puzzlers [=] 
“YouCube - Adding to the Blog for Cube Puzzlers | Pauta, 
o blog e 
Espa e enviada para 
re nward his jzzle party at the end of the month. Pp: 
Body: [fm really looking fo: to this pu ga od 


Image (optional): 
_Add the New Blog Enty | 


— ont 


como dados 
na solicitação 


Post 


lick! 


Date: 10/04/2008 
Body: “I'm really looki ” 
Image: sã id 


Clicar o 
botão Pad 
tas com que 
a solicitação 
Ajax de 
E 

acrescimo 
do blog seja 
enviada, 


The new blog entry was successfully added. 


Eee 


O cliente notifica 
o vsvário gre a 
nova entrada do 
blog foi adicionada 
com sucesso, 


blog.xml 


Ro 4 


O servidor grava a 

nova entrada da blog 
como dadas XAL na 
arquivo blog.ami, 


A resposta Ajax não 
retorna nenhum dado 
porque o cliente não 
precisa de nada de volta, 
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Como se preparar: Como enviar dados do 
blog para o servidor 


Uma solicitação POST Ajax é um pouco mais complicada do que 

uma solicitação GET porque requer enviar dados para o servidor. 

Embora a solicitação POST suporte diferentes maneiras de reunir 

os dados para o servidor, a técnica confiável de codificar com o 

URL os campos dos dados funciona muito bem. Essa técnica é a 

mesma que os navegadores usam para transmitir campos de dados 

para um servidor no URL de uma página Web e é diferenciada 

pelos caracteres “E comercial” (8) que são usados para separar cada | Date: 10/04/2008 


arte dos dados. Body: “I'm really looki 4 
Pp: pie. A y ng... 


“date<10/04/2008sbody=T'm really looking forward...” 


Uma parte individual dos dados Ps ço Cada parte dos 
7 


consiste em um par de nome/ valor, dados € separada 
fi tras por 
Este formato de dados requer que cada parte dos dados tenha seu nome = ULRI p 


e valor separados por um sinal de igual (=) e, então, cada par de nome/ 
valor seja separado dos outros dados por um E comercial (&). O formato 
é chamado de URL codificado e tem seu próprio tipo de dados que é istecs +ipo de dados 
definido como o tipo de dados da solicitação POST Ajax. S 
oficial da URL com 


dados codificados e 
“aplicativo/x-www-formulário-urlcodificado; charset=UTF-8” deve ser especificado 
como parte da 
Com os dados de entrada do blog formatados no formato URL codificado solicitação Post; 
e o tipo de dados da solicitação POST, estamos prontos para reunir o 
código da solicitação e enviar os dados para o servidor para que eles 
possam ser gravados no arquivo blog;xml. 


Reúna as seguintes partes dos dados no formato com URL codificado, 
adequado para uma solicitação POST. 
Exercicio 


releaseDate: 01/13/1989 


title: Gleaming the Cube director: Graeme clifford 


você está aqui» 585 


satisfaça sua curiosidade 


Reúna as seguintes partes dos dados no formato com URL codificado, 
adequado para uma solicitação POST. 


Solução do 
Exercício 


title: Gleaming the Cube 


“title=Gleaming the CubegreleaseDat: 


È Se o script de acréscimo 
do blog YouCube não requer 
nenhum dado do servidor 
na solicitação Ajax, por que 
se importar em lidar com a 
solicitação? 


R: A razão é que saber que uma 
solicitação completou ainda é muito 
importante. Portanto, mesmo que 

não precisemos que o servidor 
retome nenhum dado em resposta à 
solicitação, ainda precisamos muito 
saber se e quando a solicitação 
terminou com sucesso. É isso que 
permite ao script saber quando exibir o 
alerta que confirma o novo acréscimo 
da entrada do blog. 


P: uma solicitação GET 
também poderia ser usada no 
script de acréscimo do blog? 


R: Sim, tecnicamente poderia. 
Ainda é possível enviar dados para 

o servidor em uma solicitação GET, 
mas você tem que especificá-los 
diretamente no URL da solicitação. 
Realmente não é um problema - o 
problema é que o GET não é para ser 
usado em situações onde o estado do 
servidor está mudando. E neste caso, 
o estado do servidor está mudando 
definitivamente devido a gravar uma 
nova entrada do blog no arquivo blog. 
xml. Portanto, uma solicitação POST 
será a abordagem certa se não houver 
nenhuma outra razão, pois ela indica 
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Não existem 
Perguntas idiotas 


claramente a intenção da comunicação 
com o servidor. 


P: Como leva tempo para 

o servidor processar a 
solicitação Ajax e gravar a 
entrada do blog, haverá algum 
problema se o botão Add for 
clicado novamente antes da 
solicitação terminar? 


R: Sim, será um problema. Cada 
clique do botão Add cancela a 
solicitação Ajax atual e envia uma 

nova. Embora possa ser o objetivo 

de alguém ao clicá-lo duas vezes, a 
interface do usuário seria muito mais 
clara se a opção para clicar o botão 
simplesmente fosse removida enquanto 
a solicitação está sendo processada. 
Portanto, o código para adicionar uma 
nova entrada do blog deve desativar 

o botão Add enquanto a solicitação 
Ajax está ocorrendo e, então, ativá-lo 
de novo assim que a solicitação tiver 
terminado. Pequenos toques como este 
na interface do usuário de um aplicativo 
JavaScript pode contribuir muito ao 
tomá-o mais claro e fácil de usar, 
resultando em usuários mais contentes. 


P: O que acontece com os 
espaços nos dados do blog 
que são formatados em uma 
string com URL codificado? 
Algumas vezes, parece ser 
um problema com os URLs. 


R: Os espaços não apresentam 


1/13/1989&director=Graeme Cliffor: 


releaseDate: 01/13/1989 


director: Graeme clifford 


um problema neste caso porque o 
Ajax lida automaticamente com o 
processamento dos dados e assegura 
que cheguem ao servidor em um 
formato adequado. 


P: Como a imagem é 
opcional no blog, ela sempre 
tem que ser transmitida para 
o servidor ao adicionar uma 
nova entrada do blog? 


R: Não, não tem que ser. Mas 
lembre-se que não há nada de errado 
em enviar uma parte vazia dos dados 
onde não há nenhum valor após o 
sinal de igual na string com URL 
codificado, como: 


“date=...&body=...&image=" 


Neste exemplo, o campo de dados 
da imagem ainda é enviado para o 
servidor, mesmo que de fato não 
contenha nenhum dado. É onde o 
script PHP no servidor brilha, pois ele 
é esperto o bastante para saber que 
o campo da imagem está vazio e, 
portanto. a nova entrada do blog não 
tem uma imagem. 


dados dinâmicos 


e fponte seu Lápis 


Escreva as linhas de código que faltam para terminar as 
funções addBlogEntry( ) ehandleRequest( ) no 
script de acréscimo do blog YouCube. 


function addBlogEntry( ) { 


// Desative o botão Add e defina o status para ocupado 


k 


// Envie os novos dados de entrada do blog como uma sclicitação Aja; 
ajaxReq.send(“POST”, “addblogentry.php”, handleRequest, 


“application/x-www-form-urlencoded; charset=UTF-8”, 


function handleRequest( ) { 


200) 1 


if (ajaxReq.getReadyState( ) == 4 &4 ajaxReq.getStatus ( 


// Ative o botão Add e limpe o status 


// Confirme o acréscimo da entrada do blog 


alert (“The new blog entry was successfully added.”); 
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solução inteligente 


Aponte seu Lápis 
~ Solução 


Escreva as linhas de código que faltam para terminar as 
funções addBlogEntry( ) ehandleRequest( ) no 
script de acréscimo do blog YouCube. 


A área de status da página exibe uma 

mensagem de ocupada para que o usuario 
7 

saiba que esfa aguardando algo. 


O botão Add é desativado 
enquanto uma emtrada do blog 
esta sendo gravada no servidor, 


function addBlogEntry( ) { 


/! Desative o botão Add e defina o status para ocupado 


pg éuma solicitação POST; Um script PHP 


! Envie os novos dados de entrada do blog como uma solicitação Ajax do servidor 


é usado para, 
processar a 
emtrada do blog 


ajaxReg. send (NPOST”, “addblogent 


Php”, handleReques 


“application/x-wew-form-urlencoded; charset=UTF-8”, 


“gimage=” + document, getElementById (“image”) .value 


i N, i 

} ST; licitação a partir dos a 

Keuna os dados Po E da solicitação É Verifigue para assegurar que 
campos do formulario da data, corpo € imagem, a solicitação de gravação do 

function handleRequest ( ) 4 blog Herminov com SUCESSO, 


if (ajaxReq.getReadyState( | == 4 && ajaxReg.getStatus( ) == 200) { 


// Ative o botão Add e limpe o status = 


Aive o botão Add e 
limpe a area de status 
agora que a entrada do 

i blog Ferminov de gravar, 


41 Confirme o acréscimo da entrada do blog 


alert (The new blog entry was successfully added. ”); 
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O blog ficou fácil 


Ruby não pode acreditar em quanta diferença faz ser capaz de 
atualizar seu blog sem ter que abrir um arquivo, editar o código e 
fazer upload do arquivo para o servidor. Não só seu blog agora está 
realmente baseado em dados, como também ela está se sentido muito 
mais inspirada em escrever alguns dados novos do blog! 


4 
A pagina confirma se 
a entrada do blog foi 
adicionada com sucesso, 


v 


The new biog entry was successfully added 


eco YouCube - Adding to the Blog for Cube Puzzlers. 


YouCube - Adding to the Blog for Cube Puzzlers 


Date: (1070472006 
Body: f'm really looking forward to this puzzle party ato 
Image (pon [ 


e New Blog Ent. | 


Os dados dinâmicos 
do blog são 
impressionantes! 


y fornece a nova 
/ rada do blog na Pagina 
A pagina permiteao Web de acréscimo do blog. 
usuario saber gue a nova 

emtrada do blog esta A nova entrada do 


sendo adicionada, blog agora aparece 
no blog YouCube. 


Y 


ese .. YouCvbe — The Bog for Cube Puzzlers 
YouCube - The Blog for Cube Puzzlers 


Search the miog || 
really looking forward to this puzzle party at the end of the month. 
by Puzzler Ruby 


9262008 
These dreams just kocp gening weirder..now Tm seeing a cube mke itself gf 
does it mean? 


by Puzzler Ruby 


T amare Is night a bug cube was chasing me and it kept yelling my name backwards.. Ybor! 
by Puzzler R 


9992008 
Wow, it took me a month but the new cube is finally solved! 


vocêestáaqui» 589 


a utilização supera tudo 


Como tornar o YouCube mais, ah, útil 


Você não se torna um faixa preta no quebra-cabeça de cubo em terceiro grau sem 
uma atenção crítica ao detalhe. Portanto, não é muito surpreendente que Ruby 
queira tornar a página de acréscimo do blog absolutamente perfeita. E cla aprendeu 
que os aplicativos Ajax são conhecidos por sua atenção ao detalhe em relação à 
utilização. Portanto, deseja fazer algumas melhorias na utilização de sua nova página 
para que fique no mesmo nível das páginas Web modernas. 


Desejo maximizar minha eficiência 
da entrada do blog para que eu possa 
enviar mais rapidamente e espero 
que seja com mais frequência. 


Como maximizar a entrada de dados do 
blog YouGube 


Como a grande das entradas do blog é criada no presente, Ruby 
acha que economizará uma preciosa digitação se o campo da 
data do formulário do blog for preenchido automaticamente 
com a data de hoje. E como ela usará a data atual para a maioria 
das entradas do blog, gostaria de colocar o foco de entrada 

no campo de corpo do formulário. Assim, ela pode começar a 
digitar em uma entrada do blog no momento em que a página 
abrir. Certamente, nenhuma dessas alterações é absolutamente 
crítica para o trabalho do blog e elas não estão diretamente 
relacionadas ao Ajax, mas melhoram muito o “clima” da página, 
que é muito parecido com o espírito do Ajax. Além do mais, 
ajudará assegurar que Ruby manterá o blog atualizado enviando 
regularmente. 


Preencha automaticamente 
este campo com a data atual, 


eee VouCube - Adding to the Blog for Cube Puzzlers 
YouCube /Adding to the Blog for Cube Puzzlers 


Desina o foco da 


entrada aqui para Date: [10/11/2008 
gre Kub, possa Bı 
começar a fornecer pl 

Add the 
o texta da blog aes 
imediatamente. 


590 Capitulo 12 


dados dinâmicos 


Campos de autopreenchimento para seus usuários 


Se você lembra, o formato das datas do blog YouCube é MM/DD/AAAA, 
que significa que precisamos formatar a data atual no campo do formulário da 
data com autopreenchimento para o mesmo formato. Portanto, precisamos de 
algum código para formatar a data atual como MM/DD/AAAA. 


Você já criou um método Date que 
faz isso, mas está armazenado na 
página principal do blog YouCube. 
Há um modo de compartilhá-lo com 
a página de acréscimo do blog? 


Compartilhar o código comum é sempre uma boa 
idéia para evitar a duplicação. 


Certamente, não queremos nenhum código duplicado por aí no 
YouCube que você tenha que manter em dois lugares diferentes, portanto 
compartilhar o código de formatação da data entre as duas páginas é uma 
ótima idéia. E há definitivamente um modo de armazenar o código em 
um lugar e, então, compartilhá-lo em qualquer página que precise dele. 


Poder do 
“DA cérebro 


em ambas as 


Como você compartilharia o código shortrormat ( 
páginas YouCube? 


) 
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importar exportar 


Tarefa repetitiva? Que tal uma função? A tag <soript> 


Compartilhar o código JavaScript em diversas páginas Web 
H o ams a familiar é usada para 


envolve dividir o código em seu próprio arquivo, ou módulo, 


e, então, importar esse arquivo para cada uma das páginas. o 2 

Já vimos isso feito com o objeto AjaxRequest, que é importar o código 

armazenado no arquivo ajax.js e, depois, importado com a P ž 

seguinte linha de código: J avaScript que é 
sry armazenado em 

O name do arquivo uavaSeript e E 

definido para o atributo src da arquivos externos. 


+as <seripto. 
<script type="text/javascript” src= 


Ñ> </script> 


O método short Format ( ) do objeto Date pode conseguir um objetivo 
parecido sendo colocado em um arquivo chamado date.js e, então, importado para 
cada uma das páginas Web do YouCube. 


t = function) { 


ate .prototype.shortForma: 
a A “/" 4 this.getDate() + */” +ithis.getFullyear(); + 


return (this.getMonth() + 1) + 


Uma tag <script> parecida foi usada para o código Ajax poder então 
ser utilizado em cada uma das páginas YouCube para importar o código 
do script armazenado em data.js. 


date.js 


, 
O mesmo codigo 


VavaScript e 
<script type="text/javascript” src="BBESIJE”> </script> compartilhado 
em dois lugares 
i sraças ao 
Todo o comteúdo do arquivo armazenamento 
datejs e importado com do codigo em um 
esta unica bas <script>, arquivo externo. 


Quase nunca é uma má idéia dividir o código JavaScript reutilizável em 
seu próprio arquivo que pode ser compartilhado em mais de um lugar. 
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Q99 voscade Te Ba lor Cut Porra 


] 
10 


Samen na Bog || 
102005 
E di ora po puny uie end of ae a 


<div id="blog"></div> 


O método 
shortFormK 

) formata as 
emradas do blog 
na página GovlCube 
principal... 


«ct dambém 
formata a data 
atual no campo da 
data da pagina de 
acrescimo do blog, 


<input type="text” id="date” name="date” value=” size="10" 


ene Voce - Adding 10 ine Bag for Cube Puzzlers 
YouCube - Adding to the Blog for Cube Puzzlers 


Escreva o código para uma função denominada 
initForm( ) que é chamada na sub-rotina de evento 
onload do script de acréscimo YouCube. A função deve 
inicializar o campo da data com a data atual e, então, definir 


o foco de entrada para o campo do corpo. 
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solução inteligente 


Aponte seu Lápis 

~N N olução Escreva o código para uma função denominada initForm( 
) que é chamada na sub-rotina de evento onload do script 

de acréscimo YouCube, A função deve inicializar o campo da 

data com a data atual e, então, definir o foco de entrada para o 


z 
O campo da data è definido 
campo do corpo. 


para a data atual. 


function initForm( ) ( 


\ Detina o foco de entrada para a campo do corpo, 


O foco da entrada é definido 


“a 
A produtividade do blog aumenta para o corpo guando à pågiaa É 
Ruby finalmente conseguiu uma satisfação completa com carregada pela primeira vez. 
seu blog YouCube. Seu blog é baseado em dados e amistoso 
graças ao Ajax e a um comprometimento implacável com o À tata é fefiida | 
detalhe que somente uma solucionadora de quebra-cabeças au tasitiginee | 
mestre poderia requerer. 


paraa data atual 
7 


Eu realmente, realmente 


grando a pagina abre. 
amo meu blog! | 


BOAO role -adding to the og for Cube Puzziers o 
YouCube - Adding th the Blog for Cube Puzzlers à 


Body; anew, Tm final nished working on the g 


Imago (optional | 
Add the New Biog Emir) | 


OR sd working on he blog sl 
Ddr Ruby 


A sng forward 1 this puzzle party at the end of de mo 
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| E ooro racna o 
/ 1 


Dobre a página na 
vertical para alinhar 
os dois cérebros e 0) que o Ajax deu a Ruby? 


resolver a charada. 


X 


O Ajax deu tantas coisas a Ruby 
que é difícil dizer. Primeiro, há 

dados dinâmicos. que tornaram e blog de cubo muito 
mais fácil. Agora, Ruby pode 
conversar sobre seus quebra-cabeças 
de cubo com facilidade. 
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continuando sua jornada 


Para onde ir agora? 


Bem, você terminou o Use a Cabeça JavaScript e está pronto 
para continuar sua jornada para criar experiências do usuário 
interativas com o JavaScript e mais... porém, para onde deve ir em 
seguida? Eis algumas coisas nas quais pensamos que você pode 
estar interessado quando der seus próximos passos ao construir e 
ao criar aplicativos para a fantástica World Wide Web. 


Para direita ou para a 
esquerda? É hora de 
uma instrução if/else. 


EXPERIMENTE o fórum Use a Cabeça JavaScript 


Irritado com as expressões? Desarmado com os operadores? Ou você 
está apenas curioso para compartilhar sua última criação JavaScript com 
a comunidade Use a Cabeça? Faça uma visita ao fórum Use a Cabeça 
JavaScript no Head First Labs (http://www.headfirstlabs.com) e 


junte-se a uma das discussões... ou inicie uma! 


LEIA outro livro 


Você viu o essencial, portanto esteja pronto para 
se aprofundar mais nos prós e nos contras do 
JavaScript mais avançado. 

JavaScript: O Guia Definitivo 

Livro de receitas JavaScript e DHTML 


A À mais em outros sites 

Quirksmode wwm.quirksmode.org 

Infelizmente, algumas vezes navegadores diferentes têm seu próprio 
modo de fazer as coisas com o JavaScript. Descubra as inconsistências 
no navegador JavaScript no Quirksmode. 

Referência do Mozilla JavaScript 
http://developer.mozilla.org/en/docs/JavaScript 

Não levará muito tempo até que você esteja se aventurando a sair 
do usual e precisando descobrir mais sobre os objetos JavaScript 


predefinidos. Explore cada recanto do JavaScript com a referência 
on-line do Mozilla. 


Estrutura do protótipo JavaScript 
http://www.prototypejs.org 

Tentado em experimentar uma biblioteca de código reutilizável de 
terceiros para levar o JavaScript a um novo nível? A Prototype é uma das 
melhores e complemente gratuita! 
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YouCube, projeto550-551 
AjaxRequest, objeto 556-561 
getResponseText(), método 565 
postDataType 559 
url 559 
ajuda, elemento do texto 309 
ajuda, limpar mensagem 309 
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aninhadas, instruções if/else 175 
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argumentos 252 
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árvore de decisão 152-153, 382-383, 387 
changeScene(), função 157, 162, 367 
criar código HTML 384 
curScene, variável 146 
decisões em camadas 154 
id, atributo da tag <div> 346 
if/else, instruções 154 
manipular estilos individuais 379 
substituir texto do nó com função 368-369 

Aventura do Bonequinho, Um foco no código 
351 
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Bannerocity, projeto 290-292 
dados, validação 302 
placeOrder(), função 313-314 

bidimensionais, arrays 231-234 
acessar dados data 233 

Blog, objeto 404, 406, 408, 412-413 
ações 441 
classificar 472-473 


signature, propriedade 460-465 
blogSorter(), classe 473—474 
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booleano, tipo de dados 35 
booleanos, operadores 
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219 
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522-523 
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onload, sub-rotina do evento 283 
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aparecer como NaN 526—527 
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CamelCase 52, 62 
caractere, classes 336 
changeScene( ), função 157, 162, 367 
chaves 

ausentes 493—494 

switch/case, instrução 178 
checkWinner(), função 504-505 
classe, métodos 471 

chamar 474 
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classes 

armazenar métodos 455 

versus instâncias 452-453, 459 
classificar 418-423 

compare( ), função 421 
className, propriedade do nó 379 
clearInterval(), função 97 
cliente, janela 99—101 

porcentagem do tamanho 103 
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clientes 86, 89 
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Navegador Exposto 98 
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quando usar 49 
constantes, expressões 318-337 
$ 320 
2322 
\s 320 
fmín,máx) 329 
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XHTML 546 
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interatividade 8 
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D 
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validação 294-296, 302 
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datas, validar 315-316, 329 
Date, objeto 97, 410—411, 414 
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converter objetos em texto 415—417 
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caminho 161 
decisões 146 
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depuradores 511 
depurar 486-536 
= versus == 510, 532 
caracteres de escape 503, 532 
cola 505 
erro, console no navegador 491 
navegadores 492 
Safari 488 
Depurar com Alerta 509 
desativar código 527-529, 531 
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Ajax (veja Ajax) 
XHTML 545 
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Document Object Model (DOM) 352-392 
appendChild(), método 361 
DOM, árvore 357 
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propriedades 359 
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DOM 
extrair conteúdo de nós dos dados XML 566 
Duncan's Donuts, projeto 55-84 
buscar dados nas páginas Web 71 
pesquisar entrada do usuário 78 
duplicado, eliminar código 254-256 
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ELEMENTO, nó 354, 362 
Elementos 
1Ds 71 
e-mail, validação do endereço 334 
encapsulamento 472-473 
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observar variáveis 516 
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erros 
execução 524—525 
escape, caracteres 503, 511, 532 
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global 171 
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estrutura 6-7 
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de onde vêm 21 
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execução, erros 524-525 


F 


filhos, nós 353, 363 
findSear(), função 206, 211, 258 
Firefox, depurar 489—491 
floor(), método 436, 437 
for, loops 192-193, 226-228 
código não sendo chamado 227 
formulários 13, 292 
acessar dados do formulário 293 
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gerar eventos 296 
onchange, evento 295 
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função, literais 279, 281, 282 
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função, referências 278, 282 
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funções 19, 243-288, 398 
alerr() 19, 297 
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getElementByld(), método 71, 76, 101, 102, 
347, 352, 358, 375 
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getText(), Um foco na função 567 
globais, variáveis 169-173 
nível do script 173 
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H 


hear(), função 251, 263 
hierárquica, árvore de nós 353 
HTML 6-7 
acessar elementos 347—348, 522 
size, atributo 309 
HTTP, solicitação/resposta 561 


I 


id, atributo da tag <div> 346 
identificadores 50 
exclusivos 62 
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if, instruções 138, 150 
aninhadas 155, 158 
if/else, instruções 150 
aninhadas 175 
escolher entre duas coisas 141 
importar scripts externos 119 
indefinida, erro da variável 495—496 
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versus não definido 497 
indexados, arrays 199, 201, 202 
infinitos, loops 201, 223 
Mandango, projeto 210 
inicializar dados 69 
constantes 60-61 
inicializar loops 191 
initSeats( ), função 205, 248 
innerHTML, propriedade 348, 350, 352, 364, 
408 
definir conteúdo 349 
instâncias 
propriedades da classe versus propriedades 
da instância 464, 466 
interatividade 
HTML e CSS 8 
Internet Explorer, depurar 488, 491 
interpretador 86, 89, 493—494 
intervalo, temporizadores 93, 95, 97 
parar 97 
iRock, projeto 
100 no cálculo do tamanho da imagem iRock 
105 
cookie, escrita 122-123 
eventos 18 
redimensionar janelas do navegador 106-107 
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JavaScript, código 
chaves ausentes 493—494 
eventos 18 
tipos de dados 35 
JavaScript, Saindo do forno 
parseDonuts(), função 79 
JavaScript 
interpretador (veja interpretador) 


L 


length, propriedade de uma string 306-307 
letra maiúscula 52, 62, 69 
objetos 459 
Lidar com respostas Ajax 568 
locais, variáveis 169-173 
lógicos, erros 510-511, 525 
script ruim 512-513 
loops 189-242 
ação 191 
break, instruções 212, 213, 224 
contador de loops 213 
inicializar 191 
loops infinitos 201, 223 
while (veja while, loop) 
lowerCamelCase 52, 62, 249 


M 
Mandango, projeto 194-220 
2D, Um foco no Mandango 236-237 
assento, inicialização 205 
Código, Um foco em 215 
findScats( ), função 258 
mapear array para imagens de assento 204 
setSeat( ), função 257-258 
marcação, linguagem 542 
Math, objeto 434, 437 
Math, Objeto Exposto 435 
Mestre dos padrões 325 
metacaracteres 320-321, 324 
métodos 
armazenar em classes 455 
transformar funções em 441—442 
milissegundos 95, 104 


N 


NaN (Not a Number) 62, 69 
Não existem perguntas idiotas 
! (negação, operador) 165 
Ajax 580 
ajuda, limpar mensagem 309 
arrays 234 
aspas e apóstrofos 21 


Blog, objeto 441 
campo do formulário, atributo size 309 
clearInterval(), função 97 
conexão entre XML e Ajax 548 
cookies permanentes 125 
Date, objeto 414 
depuradores 511 
diferença entre operador booleano normal e 
operador lógico booleano 219 
erros tipográficos, depurar 497 
floor( ) versus round(), métodos 437 
função, literais 281 
GET e POST, solicitações 561 
HTML, atributo size 309 
indefinido versus não definido 497 
interpretador 89 
letras maiúsculas e minúsculas 62 
Math, objeto 437 
NOT, operador 219 
parseInt(), função e números decimais 76 
ponto-e-vírgula em comentários 173 
prototype, objetos 459 s 
segurança 13 
temporizadores 97 
tipos de dados 49 
variáveis shadow 531 
YouCube, script de acréscimo do blog 586 
não vazio, validação 300-303 
Navegador Exposto 98 
navegador, objeto 126 
navegadores 89 
cliente-servidor, interações 86 
cookies e segurança do navegador 124 
fechar navegador antes do temporizador 
expirar 97 
métrica 88 
sintaxe, erros 500 
new, operador 405, 413 
nós 353 
diversos filhos 360 
substituir texto do nó com função 368-369 
NOT, operador 219 
null 165 
argumentos da função ausentes 477 
number, tipo de dados 35 
número do telefone, validação 333 
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objeto, literais 413 
objetos 395 
arrays como 420 
converter em texto 415—417 
dentro de objetos 413 
letra maiúscula 459 
new, operador 405, 413 
personalizados 400-401 
ponto, operador 396-397 
protótipo 456-457 
strings como 432 
toString(), método 416 
observação, variáveis 508, 515 
consoles de erro 516 
onblur, evento 295-297 
dados do formulário ruins 298-299 
onchange, evento 295 
dados do formulário ruins 298-299 
onfocus, evento 295 
onload, evento 20, 105, 278 
onload, sub-rotina do evento 280, 283 
onmouseout, evento 375 
onmouseover, evento 375 
onresize, evento 107—109 
Opera, depurar 488 
organizacional, objeto 434 
orientada a objetos, construção (OOP) 460, 461, 
465, 467, 470—475 
orientado a objetos 461 
orientado a objetos, script 399 
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página, problemas no carregamento 522—523 
palavras-chaves 44 
letra maiúscula 46 
parêntesis 
depurar 532 
parseDonuts( ), função 79 
parseFloat(), função 65 
parseInt(), função 65, 77 
números decimais 76 
PDA- sráficos com tamanho errado 99—101 


persistência 112-115 
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clientes versus servidores 116 
personalizados, objetos 450-484 
áveis, objetos 424—432 
79-584 
executar scripts 581—582 
placeOrder(), função 313-314 
placeOrder(), Um foco na função 314 
ponto, operador 396-397 
ponto-e-vírgula em comentários 173 
ponto-e-vírgula na instrução if 143 
ponto-e-vírgula 
comentários 173 
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AjaxRequest, objeto 560 
arrays bidimensionais 235 
break, instruções 224 
classificar 432 
cliente, janela 104 
createElement(), método 385 
depurar no console de erro do navegador 
498 
erros de sintaxe 511 
expressões constantes 330 
função, literais 282 
funções 21, 259 
globais versus locais, variáveis 173 
inicializar dados 69 
instruções compostas 150 
loops 202, 224 
objetos 399 
return, instrução 269 
this, palavra-chave 459 
POST, solicitação 554-555, 561 
predefinidas, funções 21 
Preste atenção! 
= versus == 164 
códigos postais 312 
const, palavra-chave 46 
CSS, classes de estilo versus classes JavaScript 
372 
expressões constantes, aplicar escape em 
caracteres especiais 336 
redimensionar imagens 109 
validar datas 329 
problemas, dividir 244-245 
prototype, objetos 456—457, 459, 468—469 
pseudocódigo 158 
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QI, script da calculadora 487—497 
chaves ausentes 493—494 
erros tipográficos, depurar 496 

quantificadores 322-323 
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rádio, script de chamadas 498—499 
caixas de alerta 507—508 
checkWinner(), função 504-505 
depurar aspas 501—502 

random( ), método 436 

recarregar páginas, limpar variáveis 111 

redimensionar imagens 99-109 
dinamicamente 108-109 

reload( ), método 97 

repetição (veja loops) 

replaceNodeText(), função 369 

Retorno Exposto 264 

return, instrução 262-264, 269 

reutilizáveis, tarefas 254-256 
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Use a Cabeça! JavaScript 


Programação Web/JavaScript 
O que você aprenderá com este livro? 


Você está pronto para dar um salto na arte de escrever pági- 
nas da web em HTML e CSS à criação-de aplicações dinâmi- 
cas para web? Comece por aqui. Use a Cabeça! JavaScript é o 
seu passeio guiado para a emocionante e interativa criação 
de páginas da web. Criado para o seu cérebro, este livro 
abrange todos os fundamentos de JavaScript, das técni- 
cas básicas de programação web, incluindo variáveis, fun- 
ções e execução de loop, aos tópicos mais avançados como 
validação de formulário, manipulação de DOM, objetos 
personalizados, depuração — e até Ajax! Então, prepare-se... 
Os responsivos sites da web estão há algumas páginas de 
distância. 
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Por que este livro parece tão diferente? 


Nós acreditamos que seu tempo é muito valioso para ser des- 
perdiçado. Tendo como base a última pesquisa em neurobio- 
logia, ciência cognitiva e teoria do aprendizado, Use a Cabeça ! 
JavaScript tem um visual rico, projetado na forma como seu 
cérebro funciona; não se trata de uma abordagem pesada que 
faz com que você caia em sono profundo. 
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